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

Question

How to loop a nested json object in angular6? I have a nested object , how to loop that in angular 6 . Below is the json getting:

{
  "62": {
    "0": {
      "0": "AbbVie's manufacturing facilities are in the following locations:",
      "1": "United States",
      "2": "Abbott Park, Illinois*",
      "3": "Barceloneta, Puerto Rico",
      "4": "Jayuya, Puerto Rico",
      "5": "North Chicago, Illinois",
      "6": "Worcester, Massachusetts*",
      "7": "Wyandotte, Michigan*"
    },
    "1": {
      "0": "",
      "1": "Outside the United States",
      "2": "Campoverde di Aprilia, Italy",
      "3": "Cork, Ireland",
      "4": "Ludwigshafen, Germany",
      "5": "Singapore*",
      "6": "Sligo, Ireland",
      "7": ""
    }
  },
  "68": {
    "0": {
      "0": "The following table lists AbbVie's executive officers, each of whom was first appointed as an AbbVie corporate officer in December 2012, except as otherwise indicated:",
      "1": "Name",
      "2": "Richard A. Gonzalez",
      "3": "Carlos Alban",
      "4": "William J. Chase",
      "5": "Henry O. Gosebruch*",
      "6": "Laura J. Schumacher",
      "7": "Michael E. Severino, M.D.*",
      "8": "Timothy J. Richmond",
      "9": "Azita Saleki-Gerhardt, Ph.D.",
      "10": "Robert A. Michael*"
    },
    "1": {
      "0": "",
      "1": "Age",
      "2": "64",
      "3": "55",
      "4": "50",
      "5": "45",
      "6": "54",
      "7": "52",
      "8": "51",
      "9": "54",
      "10": "47"
    },
    "2": {
      "0": "",
      "1": "Position",
      "2": "Chairman of the Board and Chief Executive Officer",
      "3": "Executive Vice President, Commercial Operations",
      "4": "Executive Vice President, Chief Financial Officer",
      "5": "Executive Vice President and Chief Strategy Officer",
      "6": "Executive Vice President, External Affairs, General Counsel and Corporate Secretary",
      "7": "Executive Vice President, Research and Development and Chief Scientific Officer",
      "8": "Senior Vice President, Human Resources",
      "9": "Senior Vice President, Operations",
      "10": "Vice President, Controller"
    }
  }
}

How to loop nested object in angular 6?

Please see this question. Hope this solves your problem. Cheers — Vishak P
– Vishak P, Commented Jun 28, 2019 at 7:31

dganenco · Accepted Answer · 2019-06-28 07:24:34Z

1

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];
});

answered Jun 28, 2019 at 7:24

dganenco

1,6161 gold badge8 silver badges18 bronze badges

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

Comments

Nam V. Do · Accepted Answer · 2019-06-28 07:27:19Z

1

<!-- 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>

@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;
      }
    }
}

answered Jun 28, 2019 at 7:27

Nam V. Do

7058 silver badges29 bronze badges

1 Comment

Avin Kavish Over a year ago

1. The outer loop needs piping too. 2. You can use Object.values to get the values directly

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related