How to Iterate Through Json Nested Objects With Ngfor

How to do ngFor loop on nested json object?

You have gotten some good answers here, but all are manipulating your response and changing the build of it, instead of treating it as is. There is some other data in your response and want to retain the data, so here's a solution using Pipe instead.

You seem to have two objects in your array, but only one contains routes. Will this always be the case? If not, you might want to iterate the response and show all routes (if exists) for all objects, so I'd iterate the array first, and then iterate the routes:

<!-- Iterate array -->
<div *ngFor="let obj of jsonData">
  <!-- iterate routes for each object using pipe -->
  <div *ngFor="let route of obj.routes | keys">
    {{route.toCity}}
  </div>
</div>

And then the keys pipe:

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args?: any[]): any[] {
      // check if "routes" exists
      if(value) {
        // create instance vars to store keys and final output
        let keyArr: any[] = Object.keys(value),
            dataArr = [];

        // loop through the object,
        // pushing values to the return array
        keyArr.forEach((key: any) => {
            dataArr.push(value[key]);
        });
        // return the resulting array
        return dataArr;
      }
    }
}

This way you have not manipulated your response, and you have access to all other data that is coming with the response.

Demo

How to iterate through JSON nested objects with ngFor

I have the solution, but you need to modify your object.

You have to override toString method for cities and names in your model:

test= [{
    "id": "5b48bffc644fca001419769c",
    "names": [{
      "name": "bob",
      toString: function(){return this.name;}
    },
      {
        "name": "stan",
        toString: function(){return this.name;}
      }
    ],
    "cities": [{
      "city": "London",
      toString: function(){return this.city;}

    },
      {
        "city": "Madrid",
        toString: function(){return this.city;}

      }
    ]
  }];

HTML section will be look like:

<div *ngFor="let t of test">
  <p> {{t.id}}</p>
  <p> {{t.names.join(",")}}</p>
  <p> {{t.cities.join(",")}} </p>
</div>

Output:

5b48bffc644fca001419769c

bob,stan

London,Madrid

How to loop through unknow number of nested json object in Angular with ngFor?

I would use a recursion type of approach.

Develop a app-comment component and if comment has children, loop over the children and display the app-comment. That way it will loop over the comments until no more children

<div *ngIf='comment'>
  <span *ngIf='comment.kind; else showComment'>Kind: {{ comment.kind }}</span>
  <ng-template #showComment>
    <span>{{ comment }}</span>
  </ng-template>
  <div>
   <app-comment *ngFor='let child of comment.data?.children' [comment]='child'> </app-comment>
  </div>
</div>

See this sample illustration

how to iterate with *ngFor through nested object JSON

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>

How to loop a nested json object using ngFor in angular 6?

I've prepared sample for you. The main idea is that you have to use map function to get your nested objects and then iterate over them.

nestedItems = Object.keys(this.items).map(key => {
  return this.items[key];
});

Iterate over nested object with array of children

I would avoid excess template logic that comes with nested object for-looping. It's hard to read and debug. Instead, simplify data in TS code if possible. And then manipulate it in template.

But we can make of use | keyvalue pipe to iterate over Objects with *ngFor. We then use ng-template and *ngTemplateOutlet to create recursion.

<ng-template #recursiveList let-array>
  <li *ngFor="let item of array | keyvalue">
    {{item.key}} {{item.value}}
    <ul *ngIf="item.value"> 
      <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.value }"></ng-container>
    </ul>
  </li>
</ng-template>

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: object }"></ng-container>

Here is a working example: https://stackblitz.com/edit/angular-nested-ngfor-in-table-4nqhve?file=src%2Fapp%2Fapp.component.html

---

Related Topics