how to iterate with *ngFor through nested object JSON

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?

Anjs · Accepted Answer · 2021-02-04 08:24:02Z

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>

answered Feb 4, 2021 at 8:24

Anjs

6165 silver badges11 bronze badges

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

2 Comments

bmorgs Over a year ago

Awesome, this did the trick! I'm relatively new to working with angular--could you explain the purpose of the <ng-container> elements here? What is different between those and something like a <span>?

Anjs Over a year ago

ng-container will not get rendered in DOM. So, when you do not want extra span or div you can use it. It is especially helpful when you want to apply two structural directives to the same element. More info angular.io/guide/structural-directives

Muhammad Usman · Accepted Answer · 2021-02-04 07:15:55Z

0

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

answered Feb 4, 2021 at 7:15

Muhammad Usman

4255 silver badges17 bronze badges

2 Comments

bmorgs Over a year ago

This sort of works, but not quite. Its having all of the values print out in the first column of the graph.

Muhammad Usman Over a year ago

yes now you have an idea you can do it by your self i just answer to the problem which you mentioned

Collectives™ on Stack Overflow

how to iterate with *ngFor through nested object JSON

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related