Utilizing Angular 4 alongside Firebase and AngularFire presents a question. How can I showcase the top 10 users from my database on the HTML code? Here is the snippet of code:
export class HomefillerComponent implements OnInit {
topusers: Observable<any>;
constructor(db: AngularFireDatabase,public authService: AuthService) {
this.topusers = db.list('users', {
query: {
orderByChild: "totalscore",
limitToLast: 10,
}
}).map((topusers) => {console.log(topusers);
return topusers.reverse();})
}
The structure of my Firebase database looks like this:
"users" : {
"Test1" : {
"totalscore" : 50,
"username" : "test1"
},
"Test2" : {
"totalscore" : 30,
"username" : "test2"
},
"Test3" : {
"totalscore" : 20,
"username" : "test1"
},
"Test4" : {
"totalscore" : 10,
"username" : "test1"
},
"Zekes" : {
"totalscore" : 14,
"username" : "Zekes"
}
}
While navigating through my Angular 4 app, everything functions as expected. However, upon refreshing the page, I encounter an issue involving two console.log(a). One shows the reversed object while the other displays the original order. Consequently, my HTML showcases the data in the non-reversed format.
Any suggestions on what could be causing this peculiar behavior? This only occurs when I refresh the page.
Here is the output of console.log(a) after refreshing the page.https://i.sstatic.net/cLihQ.png