angularfire2 firebase db not showing all items in object list

Question

I need to retrieve data from below given firebase db:

Following is my TS code to retrieve the data:

ionViewDidLoad(){
this.customerId = this.navParams.get('data');     
this.customerProvider.getData(this.customerId).snapshotChanges().subscribe(x =>{
  this.listOne = x
  this.listOne.forEach(y =>{
   this.listTwo = this.customerProvider.getListDetails(this.customerId, y.key).snapshotChanges()
   console.log(this.listTwo)
  })      
})
}

Following is the HTML:

<ion-item>
  {{(listTwo | async)?.key}}
</ion-item>

The problem is the list shows only 1 item whereas the firebase db has 3 items with key. Following is the console screenshot

Following is the output

Following are the providers:

  getFile(customerId){
    return this.afDb.list(`response/${customerId}`)
  }

  getFileDetails(customerId, listOne): AngularFireObject<any>{
    return this.afDb.object(`response/${customerId}/${listOne}`)
  }

Seeems like forEach or AngularFire Object issue but not sure.

can you provide an example of the listOne array and the listTwo array that you are expected? — Chybie
your question is not clear enough because no one know your db structure and explanation is not very clear — Chybie
The db structure is clear in first pic. Under ml there is customerId node there are 3 child, each child has several child elements, each of which further has name and score child elements. listOne is the array 3 child which is used to obtain the keys. key is inserted to get the angularfire object details. Pls feel free to ask for more clarification — Disu
You seem to be overriding listTwo in a loop, therefore only getting the last value. You probably want to create an array and iterate over it with a standard *ngFor. — Daniel F
I had tried Array(with ngFor loop) and Observables too. Both seem to give the same result. Shows in console but skips on view. — Disu

D3M0N D3M0N · Accepted Answer · 2018-09-12T19:10:43

snapshotChanges() returns an Observable of type AngularFireAction, you have to first map it to filter the data from it. That's also why you are just getting one list. Try:

this.customerProvider
  .getData(this.customerId).snapshotChanges()
  .map(filter => {
    return filter.map(c => (
      // return keys only
      c.payload.key
    ));
  }
).subscribe(x => {
  this.listOne = x;
  console.log(x);
  this.listOne.forEach(y =>{
     this.listTwo = this.customerProvider
       .getListDetails(this.customerId, y.key).snapshotChanges()
       .map(filter => {
          filter.map(c => (c.payload.val()))
       })
    })
    console.log(this.listTwo);
 });

Hope this helps. I recently started learning Angular too. So any feedback would be appreciated.

angularfire2 firebase db not showing all items in object list

1 Answers