Overview:
My game data is structured as an array called 'game' with seven objects representing each round. Each round object contains details like 'roundNumber', 'title', 'players', and 'winner'. The 'players' property is an array of objects for each player, including their score for the 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,
},
// Additional round objects
// Additional round objects
// Additional round objects
];
Goal:
I aim to efficiently display this data in a table on my template using *ngFor loop in Angular.
<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 round of game">
<td *ngFor="let player of round.players">{{ player.score }}</td>
</tr>
</tbody>
</table>
I've successfully iterated through each round but encountered difficulty looping through each player within each round. Any guidance on structuring the loop would be highly appreciated. I envision the final output to resemble this: https://i.sstatic.net/cHvWo.png