Looping through array in Angular 2

Question

Component:

export class PersonalRecordsComponent implements OnInit {
  currentUser = [];
  userRecords = [];
  movements = [
    "Back Squat",
    "Bench Press",
    "Clean",
    "Clean & Jerk",
    "Custom Movement",
    "Deadlift",
    "Front Squat",
    "Jerk",
    "Power Clean",
    "Power Snatch",
    "Push Press",
    "Snatch",
    "Strict Press"
  ];

  constructor(private afService: AF) {
    // Get current user details.
    afService.getCurrentUserInfo().then(currentUserDetails => {
      this.currentUser.push(currentUserDetails);
    }).then(() => {
      for(let movement of this.movements) {
        this.afService.getRecords(movement, this.currentUser[0].userID).subscribe((data) => {
          this.userRecords.push(data);
        });
      }
    }).then(()=>{
      console.log(this.userRecords)
    })
  }

HTML:

<ng-container *ngFor="let record of userRecords">
        <div class="list-athletes">
          <div class="list-athletes-details">
            <p>{{ record.movement }} - {{ record.weight }}</p>
          </div>
          <div class="list-athletes-actions">
            <div class="btn-group">
            </div>
          </div>
        </div>
      </ng-container>

The above code outputs 13 <div>'s, which is correct but they are empty due to *ngFor="let record of userRecords". If I instead write *ngFor="let record of userRecords[0]" in the *ngFor loop, it outputs the correct data, but only for the first array, obviously.

My question is: How do I output the correct data for each of the 13 arrays without writing 13 *ngFor loops, such as:

*ngFor="let record of userRecords[0]"
*ngFor="let record of userRecords[1]"
*ngFor="let record of userRecords[2]"

etc.

Each one of these arrays can contain multiple objects.

[
  [
    {
      "comments": "Back squat comment alpha",
      "movement": "Back Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "365"
    },
    {
      "comments": "Back squat comment bravo",
      "movement": "Back Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "325"
    }
  ],
  [],
  [],
  [],
  [],
  [],
  [
    {
      "comments": "Front squat comment alpha",
      "movement": "Front Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "315"
    }
  ],
  [],
  [],
  [],
  [],
  [],
  []
]

show us how your userRecords array look like

Sajeetharan
– Sajeetharan

2017-06-17 03:41:49 +00:00
Commented Jun 17, 2017 at 3:41 — Sajeetharan
– Sajeetharan, Commented Jun 17, 2017 at 3:41
@Sajeetharan added it to the post

Joe Berthelot
– Joe Berthelot

2017-06-17 03:45:06 +00:00
Commented Jun 17, 2017 at 3:45 — Joe Berthelot
– Joe Berthelot, Commented Jun 17, 2017 at 3:45
post your array! not a screenshot! its hard

Sajeetharan
– Sajeetharan

2017-06-17 03:45:36 +00:00
Commented Jun 17, 2017 at 3:45 — Sajeetharan
– Sajeetharan, Commented Jun 17, 2017 at 3:45
@Sajeetharan better?

Joe Berthelot
– Joe Berthelot

2017-06-17 03:53:33 +00:00
Commented Jun 17, 2017 at 3:53 — Joe Berthelot
– Joe Berthelot, Commented Jun 17, 2017 at 3:53
just do a console.log and post the array

Sajeetharan
– Sajeetharan

2017-06-17 03:55:34 +00:00
Commented Jun 17, 2017 at 3:55 — Sajeetharan
– Sajeetharan, Commented Jun 17, 2017 at 3:55

MichaelSolati · Accepted Answer · 2017-06-17 04:12:54Z

1

As an idea, why not run embedded *ngFor loops with an *ngIf to ensure the array isn't empty? So you're HTML would look like...

<ng-container *ngFor="let lift of userRecords">
  <div *ngIf="records(lift)">
    <div *ngFor="let record of lift">
    <div class="list-athletes">
      <div class="list-athletes-details">
        <p>{{ record.movement }} - {{ record.weight }}</p>
      </div>
      <div class="list-athletes-actions">
        <div class="btn-group"></div>
      </div>
    </div>
  </div>
  </div>
</ng-container>

And you'd add a method to your component called records that would look like this:

public records(lifts: any[]): boolean {
   return (lifts.length > 0) ? true : false;
}

This function will just check to see if there are records to display.

answered Jun 17, 2017 at 4:12

MichaelSolati

2,8721 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MichaelSolati Over a year ago

P.S. Your front squat is pretty legit. I lose stability of the weight on my front squat so there's like always a big gap between my front squat and back squat. Do you crossfit?

developer033 Over a year ago

I think it can just be written in template *ngIf="lifts.length > 0".

MichaelSolati Over a year ago

It's just to skip the loop if the array is empty. Is it necessary, not at all.

Joe Berthelot Over a year ago

@MichaelSolati thanks, it never occured to me that you could nest *ngFor loops. Definitely fixed this issue.

Joe Berthelot Over a year ago

@MichaelSolati and yeah I did CrossFit for two years.

|

topalkata · Accepted Answer · 2017-06-17 04:10:14Z

1

You can nest the loops:

<div *ngFor="let record of userRecords">
    <div *ngFor="let item of record">...

Sample

answered Jun 17, 2017 at 4:10

topalkata

2,0982 gold badges16 silver badges15 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-06-17 04:31:34Z

1

You need to have two ngFor since records is also an array,

<ng-container *ngFor="let record of userRecords">
    <div *ngFor="let reco of record">

also make sure you have CommonModule imported inside the app.module.ts

edited Jun 17, 2017 at 4:31

answered Jun 17, 2017 at 4:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Sajeetharan Over a year ago

dude! why you removed the answer?

Collectives™ on Stack Overflow

Looping through array in Angular 2

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related