Ionic and Firebase (Getting the List of Names from Firebase)

Hi, I am trying to get the list of names from my Firebase Realtime Database. Below you will see the steps I have taken to do this. However, my problem is that nothing is showing when I am on the page! If anyone have any better suggestions, please let me know! To note: I am only reading the data from Firebase, not writing, deleting or creating.

Firebase Database Structure:

  Email: ""
  Location: "Building 0"
  Name: "Someone Name"
  Phone Number: "333-3333"

Copy my credentials to a a new file in src/app/credentials.ts

export var firebaseConfig = {
  apiKey: "Your credentials here",
  authDomain: "Your credentials here",
  databaseURL: "Your credentials here",
  projectId: "Your credentials here",
  storageBucket: "Your credentials here",
  messagingSenderId: "Your credentials here",

Initialized Firebase in app.module.ts and inside @NgModule() look for your imports array

import { firebaseConfig } from './credentials';

import { AngularFireModule } from '@angular/fire';

import { AngularFirestoreModule } from '@angular/fire/firestore';

import { AngularFireStorageModule } from '@angular/fire/storage';

// This is inside @NgModule()
import { AngularFireDatabaseModule } from '@angular/fire/database';
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig), AngularFirestoreModule, AngularFireDatabaseModule],

Added this line inside the initializeApp function for running the Firebase configuration in app.component.ts.

Open and edit src/app/directory/ then add this import.

import * as firebase from 'firebase';
import { LoadingController } from '@ionic/angular';

Declare variables before the constructor to hold list and referencing Firebase database.

infos = [];
ref = firebase.database().ref('infos/');

Add this Firebase function to listening any value changes from Firebase Database.

constructor(private router:Router , private location:Location,public loadingController: LoadingController) {
    this.ref.on('value', resp => {
      this.infos = [];
      this.infos = snapshotToArray(resp);

Add this constant function below the Class block for converting Firebase response to an array.

export const snapshotToArray = snapshot => {
    let returnArr = [];

    snapshot.forEach(childSnapshot => {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;

    return returnArr;

Trying to show the list in

<ion-card *ngFor="let info of infos">
        {{ info.Name }}

Again, my problem is that nothing is actually showing, the page is just blank except for the styling of the background. Therefore, I am not getting the list of names from Firebase Realtime Database. I really need help as soon as possible

hi, @AmberS
In my case writing like this works …

this.infos = [];
let tmpdata = resp.val();

for (let key in tmpdata){

I hope it will help you.

1 Like

@addwebsolution I was actually able to figure everything out with your help! Thank you!

Hi, @AmberS

If your issue is resolved, please mark as a solution.