CODEWITHSUNDEEP
arraysangulartypescriptfirebaseionic-framework
AngularNewbie
AngularNewbie

Reputation: 133

For loop only displays last data retrieved from firebase

I have this for loop where I 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 this one to i<=8 because total no. of quizzes are 9. which 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");
            }
        }

    });

First, it will check if there is the userScores[] length is less 0 or greater than or equal 0. If there is no score for that quiz, it will display "Nothing Recorded" else it will display the 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 where it only displays the last record. What is am I doing wrong?

Displays MitAdapt only on my View

Expected 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
.....

Upvotes: 0

Views: 509

Answers (2)

Kurt Acosta
Kurt Acosta

Reputation: 2557

First, in every iteration of the loop, you are changing the value in the this.scores variable when in fact you should be pushing it to store the data from the previous quizzes.

Use this.scores.push instead.

You could also change the condition in the for-loop and use i < this.userScores.length to make it depend on the length of the array.

Then change the ngIf in the html to check if score.Score exists or not. If it doesn't, there's no score

Upvotes: 1

amal
amal

Reputation: 3170

Well, from your code it seems like this.userScores.length = 9 is always greater than the index i within the loop (i only varies from 0 to 8). So for each loop iteration the last block (else if block) gets executed. Since you are not dynamically changing/adding to the this.scores array but only assigning to the object itself (not changing the array index for this.scores somehow or pushing to the existing this.scores list), the value in the current iteration of this. userScores[i]'s index gets stored to this.scores at each iteration. Upon the last iteration, whatever the this.userScores[8] had will be the value of this.scores with that list only having length = 1.

Makes sense?

Upvotes: 0

Related Questions