Can someone help me with looping through each object?
I am trying to monitor changes in Firebase, and while it detects if there is a push from Firebase, I am facing issues displaying it in the HTML.
Where am I going wrong?
Thank you!
ping-list.ts
pingList() {
this.ping.getPingList()
.subscribe((data) => {
this.ping_list = data;
console.log(this.ping_list);
});
}
*note: When I use console.log(this.ping_list), I can see the object printed in the console. If there are changes in the data (manually changed from Firebase console), it will print again, so I assume the observable is working fine.
ping.ts (provider)
getPingList(): Observable<any> {
return new Observable(observer => {
firebase.database().ref('pings/_list')
.orderByValue().limitToLast(10)
.on('value',
(snapshot) => {
observer.next(snapshot.val());
},
(err) => {
console.log(err);
}
);
});
}
ping-list.html
<button ion-item *ngFor="let a_ping of ping_list">
{{ a_ping.title }}
</button>
The Firebase data looks like this:
"pings" : {
"_list" : {
"-KmjxLuZWIE72D_syD73" : {
"date_updated" : 1497600717098,
"desc" : "ping server 1",
"title" : "ping 1"
},
"-Kmk0x-3OI0FP-TYxC3W" : {
"date_updated" : 1497601921866,
"desc" : "ping server 2",
"title" : "ping 2"
}
},
This gives me an error:
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Is it because Angular's ngFor directive cannot loop over the ping_list directly? Is there a way to convert the object into an array? I tried console.log(this.ping_list.length) but it returned undefined.