CODEWITHSUNDEEP
angulartypescriptfirebaseangularfire
Vasilis Michail
Vasilis Michail

Reputation: 403

Angular4 Firebase FirebaseListObservable control index to display on html

I want to create a leaderboard in my application.So I need to read the names and totalscores info from the Firebase Database and display them on browser. My goal is to to display something like this on browser but replace the Unknown with database usernames and topscores of course.

Leaderboard

  • First:Unknown,Topscore:Unknown
  • Second:Unknown,Topscore:Unknown
  • Third:Unknown,Topscore:Unknown
  • Fourth:Unknown,Topscore:Unknown
  • Fifth:Unknown,Topscore:Unknown

    • My firebase database is:

    "users" : {
    "Test1" : {
      "totalscore" : 50,
      "username" : "test1"
    },
    "Test2" : {
      "totalscore" : 30,
      "username" : "test2"
    },
    "Test3" : {
      "totalscore" : 20,
      "username" : "test1"
    },
    "Test4" : {
      "totalscore" : 10,
      "username" : "test1"
    },
    "Test5" : {
      "totalscore" : 50,
      "username" : "test1"
    },
    "Test6" : {
      "totalscore" : 30,
      "username" : "test2"
    },
    "Test7" : {
      "totalscore" : 20,
      "username" : "test1"
    },
    "Test8" : {
      "totalscore" : 10,
      "username" : "test1"
    }
  }

    With the following code I can get the inverted info from what I want.

    topusers: FirebaseListObservable<any>;
  constructor(db: AngularFireDatabase) {


        this.topusers = db.list('users', {
        query: {
         orderByChild: "totalscore",
         limitToLast: 10,
        }
        });
   }

    And last using *ngFor I can display the 5 topscores from the fifth to the first.

    <ul *ngFor="let topuser of topusers | async">
  <li class = "white" > 
      {{ topuser.username | json }}:
      {{ topuser.totalscore | json }}          
  </li>
</ul>

    My question is that is there any way to control the *ngFor so instead to start from the first index of the list to start from the last and end on the first?? Or is there anyway I can control the index of the FirebaseListObservable that I want to display on the browser??

    Upvotes: 0

    Views: 285

    Answers (1)

    LLai
    LLai

    Reputation: 13416

    You don't necessarily want to manipulate the order of the ngFor but instead manipulate the data being passed into the ngFor. You can reverse the order of the data returned from the firebase observable with the .map method

    topusers: Observable<any>; // use Observable<> instead of FirebaseListObservable<> since .map is an rxjs method that returns the type Observable

constructor(){
    this.topusers = db.list('users', {
        query: {
            orderByChild: "totalscore",
            limitToLast: 10,
        }
    })
    .map(res => res.reverse());
}

    So now the array being passed to the ngFor is reversed.

    Upvotes: 1

    Related Questions