arrays - For loop only displays last data retrieved from firebase -

i have loop retrieve user's progress

typescript:

his.userprogress = af.object('/userprogress/' + this.currentuser + '/', { preservesnapshot: true });      this.userprogress.subscribe(snapshots => {         snapshots.foreach(snapshot => {             this.userscores.push(snapshot.val());         });         console.log(this.userscores);          //set 1 i<=8 because total no. of quizzes 9. means this.userscores.length -1         for(var i=0; <= 8; i++){             if (this.userscores.length == i) {                 this.scores = [{                     none: "nothing recorded"                 }];                 console.log("nothing");             }              else if (this.userscores.length >= i) {                 this.scores = [{                     chapter:this.userscores[i].chapter_quiz,                     quizno:this.userscores[i].quiz,                     score:this.userscores[i].score,                 }];                 console.log("with scores");             }         }      }); 

first, check if there userscores[] length less 0 or greater or equal 0. if there no score quiz, display "nothing recorded" else display score.

html:

<ion-card>  <ion-list *ngfor="let score of scores">   <ion-card-header>     {{score.chapter}}   </ion-card-header>    <button ion-item *ngif="scores.length < 0">     <ion-icon name="planet" item-start></ion-icon>     {{score.none}}   </button>    <button ion-item *ngif="scores.length >= 0">     <ion-icon name="planet" item-start></ion-icon>     {{score.score}}   </button>  </ion-list> 

i'm having problems displays last record. doing wrong?

expected output:

if finished 1st quiz:  1st: score 2nd: nothing recorded 3rd: nothing recorded ....   if no score @ all: 1st: nothing recorded 2nd: nothing recorded ..... 

first, in every iteration of loop, changing value in this.scores variable when in fact should pushing store data previous quizzes.

use this.scores.push instead.

you change condition in for-loop , use i < this.userscores.length make depend on length of array.

then change ngif in html check if score.score exists or not. if doesn't, there's no score