Fetch data from AngularFire2 5.0.0-rc.8 not displaying

Question

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);
      }
    )
  }

No. No errors. Its solved now by the change in code as suggested by Kim. Thank You! — Dibyanshu Patnaik, May 23 '18 at 06:28

score 0 · Accepted Answer · answered May 22 '18 at 13:53

0

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;
  });
});

answered May 22 '18 at 13:53

Kim Ruan

90
1
10

Thanks a lot. This works! Any resource from which I can read up more on this? Because AngularFire2 v5 doesn't really have much documentation so this code snippet looks a bit new to mean. Like how different is itemSnapshot from .valueChanges().subscribe? – Dibyanshu Patnaik May 23 '18 at 06:17

Fetch data from AngularFire2 5.0.0-rc.8 not displaying

1 Answers1