javascriptionic-frameworkfirebase-realtime-databaseionic3angularfire5

Fetch data from AngularFire2 5.0.0-rc.8 not displaying


During runtime, I'm able to get the data as seen from the Chrome Developer Tab Network Frames view, but its not displayed on the Console. The "Hello" alert is shown, but not the "Inside" Alert, which is odd. Any way to resolve this issue?

In app.module.ts:

import { AngularFireModule } from 'angularfire2';
//import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database'

const firebaseConfig = {
  apiKey: "AIzaSyClxpBtKaVlcr5n-itSoZM_WWTLBqVf-og",
  authDomain: "ionic-abs-conference.firebaseapp.com",
  databaseURL: "https://ionic-abs-conference.firebaseio.com",
  projectId: "ionic-abs-conference",
  storageBucket: "ionic-abs-conference.appspot.com",
  messagingSenderId: "668567626055"
};

Inside imports: [...

AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,

In schedule.ts

import {  AngularFireDatabase } from 'angularfire2/database'

Inside class SchedulePage constructor

public angFire   : AngularFireDatabase

Inside ionViewDidLoad

this.getDataFire();

And then

getDataFire()
  {
    alert("Hello");
    this.angFire.list('/speakers/0/').valueChanges().subscribe(
      data=> {
        //this.arrData= data;
        alert("Inside");
        console.log(JSON.stringify(data))
      }, (err) => {
        console.log(err);
      }
    )
  }

Solution

  • If you trying to get a list of objects from firebase database, try this:

    import * as firebase from "firebase";
    ...
    public list: Array<any> = [];
    public listRef: firebase.database.Reference = firebase.database().ref('/speakers/0/');
    ...
    this.listRef.on('value', itemSnapshot => {
      this.list = [];
      itemSnapshot.forEach( itemSnap => {
        this.list.push(itemSnap.val());
        return false;
      });
    });