How to display data within nested object array in Angular Ionic?

Question

In my Ionic Angular app, I'm trying to display the below array that contains several workout exercises. Each exercise consits of several sets:

 exercises = [
    {
      name: 'Leg Extension Machine',
      sets: [
        { setNo: 1, reps: 8, weight: 40 },
        { setNo: 2, reps: 10, weight: 36 },
        { setNo: 3, reps: 15, weight: 33 },
      ],
    },
    {
      name: 'Leg Press Machine',
      sets: [
        { setNo: 1, reps: 8, weight: 80 },
        { setNo: 2, reps: 10, weight: 72 },
        { setNo: 3, reps: 15, weight: 65 },
      ],
    },
    {
      name: 'Rear Leg Elevated Split Squat (Bench)',
      sets: [
        { setNo: 1, reps: 8, weight: 8 },
        { setNo: 2, reps: 10, weight: 8 },
        { setNo: 3, reps: 15, weight: 8 },
      ],
    },
  ];

I'm able to use ngFor to display the exercise names like so:

 <ion-card *ngFor="let exercise of exercises">
    <ion-card-header>
      <ion-card-title>
        {{exercise.name}}
      </ion-card-title>
    </ion-card-header>
  </ion-card>

It displays like so:

Now, I am trying to display each set under each Exercise Name.

I've managed to log data related to each set to the console using the below nested loops, but I don't know how to get this data to the front end:

ngOnInit() {
    for (let i = 0; i < this.exercises.length; i++) {
      this.exercises[i].sets;
      console.log('---', this.exercises[i].name);
      for (let x = 0; x < this.exercises[i].sets.length; x++) {
        console.log('---', this.exercises[i].sets[x].weight);
      }
    }
  }

score 1 · Answer 1 · answered Jun 08 '21 at 20:22

This should work:

<ion-card *ngFor="let exercise of exercises">
    <ion-card-header>
        <ion-card-title>
            {{exercise.name}}
        </ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <div *ngFor="let set of exercise.sets">
            <ul>
                <li><strong>Nr.</strong> {{set.setNo}}</li>
                <li><strong>Reps</strong> {{set.reps}}</li>
                <li><strong>Weight</strong> {{set.weight}}</li>
            </ul>
        </div>
    </ion-card-content>
</ion-card>

You already have the current object of your exercise assigned to exercise so you can then retreive the sets from that variable and iterate over these sets.

score 1 · Answer 2 · answered Jun 08 '21 at 20:24

In the template, you need to use 3 loops and for displaying the individual set by keys and value you need to leverage the keyvalue pipe.

<div *ngFor="let exercise of exercises">
  <h2>{{ exercise.name }}</h2>

  <div *ngFor="let set of exercise.sets">
    <span *ngFor="let prop of set | keyvalue">
      {{ prop.key }}: {{ prop.value }}
    </span>
  </div>
</div>

Here's a stackblitz

How to display data within nested object array in Angular Ionic?

2 Answers2