When using a for loop to retrieve a user's progress, I encounter an issue.
In Typescript:
this.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 the loop condition to i<=8 because there are 9 quizzes in total. This means this.userScores.length -1
for(var i=0; i <= 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");
}
}
});
Initially, it will check if the userScores[] length is less than 0 or greater than or equal to 0. If no score exists for that quiz, it will display "Nothing Recorded". Otherwise, it will display the score.
In 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 encountering an issue where only the last record is being displayed. What am I doing wrong?
https://i.sstatic.net/zCg3x.png
Desired Output:
If finished with the 1st quiz:
1st: Score
2nd: Nothing Recorded
3rd: Nothing Recorded
....
if no score at all:
1st: Nothing Recorded
2nd: Nothing Recorded
....