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

Ionic Framework
1

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:

0
  Email: "someoneEmail@gmail.com"
  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.
firebase.initializeApp(firebaseConfig);

Open and edit src/app/directory/directory-list.page.ts 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;
        returnArr.push(item);
    });

    return returnArr;
};

Trying to show the list in directory-list.page.html

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

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

2

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

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

for (let key in tmpdata){
this.infos.push({data:tmpdata[key],key:key})
}

I hope it will help you.

1 Like
3

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

4

Hi, @AmberS

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

Thanks