how to iterate with *ngFor through nested object JSON - html

Question

I have a nested object JSON file which looks something like this:
"8": {
"age": "Grand Masters",
"gender": "Women",
"division": "Club",
"year_placements": {
"2017": {
"year": 2017,
"event_id": "53522846-5039-11eb-8917-080027315160",
"event_season_id": "d62f237c-5040-11eb-8917-080027315160",
"event_name": "USA Ultimate Masters Championships",
"event_location": "Aurora, Colorado",
"placements": {
"1": {
"d62c24e9-5040-11eb-8917-080027315160": {
"team": "Boston",
"team_location": "Boston, Massachusetts",
"team_season_id": "d62c24e9-5040-11eb-8917-080027315160",
"event_team_placement_id": 5411
}
},
"2": {
"d6333181-5040-11eb-8917-080027315160": {
"team": "J2",
"team_location": "Seattle, Washington",
"team_season_id": "d6333181-5040-11eb-8917-080027315160",
"event_team_placement_id": 5412
}
}
}
},
"2018": {
"year": 2018,
"event_id": "537edbe9-5039-11eb-8917-080027315160",
"event_season_id": "e02569e6-5040-11eb-8917-080027315160",
"event_name": "USA Ultimate Masters Championships",
"event_location": "Aurora, Illinois",
"placements": {
"1": {
"e0227383-5040-11eb-8917-080027315160": {
"team": "Furari",
"team_location": "San Diego, California",
"team_season_id": "e0227383-5040-11eb-8917-080027315160",
"event_team_placement_id": 5852
}
},
"2": {
"e029d38a-5040-11eb-8917-080027315160": {
"team": "Boston",
"team_location": "Boston, Massachusetts",
"team_season_id": "e029d38a-5040-11eb-8917-080027315160",
"event_team_placement_id": 5853
}
}
}
}
}
I have an instance of this object called this.tournament. I'm trying to iterate through each year and display the year, as well as the each team in the placements nested object, all in a single row of a table. Right now my html looks like:
<table>
<thead>
<tr>
<th>Year</th>
<th>Champion</th>
<th>2nd Place</th>
<th>Semi-Finalist</th>
<th>Semi-Finalist</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let year_placement of tournament.year_placements | keyvalue'>
<td>{{year_placement.key}}</td>
<td *ngFor='let team_placement of year_placement.value.placements | keyvalue'>
{{team_placement.key}}
</td>
</tr>
</tbody>
</table>
I have 2 problems that I can see. Most importantly, the year is printed out correctly, but I can't figure out how to print the "team" field. team_placement.key prints out the placement like 1, 2, 3...and team_placement.value just says it [Object, object]. I need team_placement.value.team, but that gives me an undefined.
The 2nd problem I want to always generate 5 total <td>s for each row, even if they have to be empty. Right now if there are less than 4 teams in the "placements" object, it will leave the table missing boxes for those last couple columns. How can I make sure that I always generate 5 's?

Answer 1

You can iterate like below :
<table style="border: solid 1px">
<tr *ngFor='let year of tournament?.year_placements | keyvalue' style="border: solid 1px">
<td style="border: solid 1px">{{year.key}}</td>
<ng-container *ngFor='let teams of year.value.placements | keyvalue'>
<td *ngFor="let team of teams.value | keyvalue" style="border: solid 1px">
<ng-container *ngFor="let teamDesc of team.value | keyvalue">
<div *ngIf="teamDesc.key !== 'team_season_id'">
{{teamDesc.value}}</div>
</ng-container>
</td>
</ng-container>
</tr>
</table>

Answer 2

check this
<table border="$1">
<span *ngFor='let year of data | keyvalue'>
<span *ngIf="year.key == 'year_placements'">
<tr *ngFor='let teams of year.value | keyvalue'>
<td>{{teams.value.year | json}}</td>
<span *ngFor='let item of teams.value.placements | keyvalue'>
<span *ngFor='let subItem of item.value | keyvalue'>
<td>{{subItem.value.team}}</td>
</span>
</span>
</tr>
</span>
</span>
</table>
this is the inherited data that's why
here is example