CODEWITHSUNDEEP
javascriptangulartypescript
FlashBanistan
FlashBanistan

Reputation: 456

How do I iterate over an array within an object within an array using *ngFor in angular 2?

Background:

I have an array called game that consists of seven objects that represent each round in the game. Within each object I have details about that round such as 'roundNumber', 'title', 'players', and 'winner'. The 'players' property is an array of 'player' objects which contains the score for that player on that particular round. 

game = [

    {
      roundNumber: 1,
      title: "2 Books",
      players: [
        {
          pk: 1,
          username: "James",
          score: 5,
        },
        {
          pk: 2,
          username: "Jim",
          score: 54,
        },
        {
          pk: 3,
          username: "Bob",
          score: 22,
        },
      ],
      winner: undefined,

    },

    {
      roundNumber: 2,
      title: "1 Book 1 Run",
      players: [
        {
          pk: 1,
          username: "James",
          score: 54,
        },
        {
          pk: 2,
          username: "Jim",
          score: 32,
        },
        {
          pk: 3,
          username: "Bob",
          score: 76,
        },
      ],
      winner: undefined,
    },

    //etc
    //etc
    //etc

];

What I want to happen:

I want to be able to loop through all of this data and place it in a table on my template using *ngFor.

<table id="data-table" class="table table-striped">
    <thead>
      <tr>
        <th *ngFor="let round of game">{{ round.title }}</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let player of round of game"> //HOW DO I STRUCTURE MY LOOP HERE?
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
      </tr>
    </tbody>
  </table>

As you can see, I've looped though the top level array but I don't know how to loop through each player on each round. Any help would be greatly appreciated. It should look something like this: enter image description here

Upvotes: 0

Views: 3019

Answers (2)

EldarGranulo
EldarGranulo

Reputation: 1615

You can use the extended syntax of *ngFor here:

<table id="data-table" class="table table-striped">
  <ng-template ngFor let-round [ngForOf]="game">
    <thead>
      <tr>
        <th>{{ round.title }}</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let player of round.players">
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
        <td>{{  }}</td>
      </tr>
    </tbody>
  </ng-template>
</table>

Upvotes: 1

Babar Hussain
Babar Hussain

Reputation: 2905

Loop though each rounds in TR and td for each player.

 <tr *ngFor="let round of game">
   <td *ngFor="let player of round.players">{{ player.score }}</td>
 </tr>

note your rounds and players data should be in same manner for each array good luck.

Upvotes: 5

Related Questions