How to do ngFor loop on nested json object?

Question

It seems to be simple thing to do, but somehow i did not get inner array element to do ngFor loop on Angular 2.

I have json array as below, and i need to iterate through available 'routes' in my response array which is nested element. Now can any one let me know how can i get route which should be simple and i am trying like this.routes=respondeJson[0].routes Or this.routes=resonseJson[0]['routes'] but no luck. Please help considering my entry level here on Angular 2 or say working with JSON.

 [
  {
    "routes": {
      "0": {
        "budget": 326,
        "toCity": "United States",
        "QuoteIds": [
          1,
          2
        ],
        "options": 2
      },
      "1": {
        "budget": 374,
        "toCity": "Thailand",
        "QuoteIds": [
          3,
          4
        ],
        "options": 2
      },
      "2": {
        "budget": 382,
        "toCity": "Singapore",
        "QuoteIds": [
          5,
          6
        ],
        "options": 2
      },
      "3": {
        "budget": 451,
        "toCity": "Taiwan",
        "QuoteIds": [
          7
        ],
        "options": 1
      },
      "5": {
        "budget": 112,
        "toCity": "Turkey",
        "QuoteIds": [
          8
        ],
        "options": 1
      },
      "6": {
        "budget": 314,
        "toCity": "Saudi Arabia",
        "QuoteIds": [
          9
        ],
        "options": 1
      },
      "8": {
        "budget": 518,
        "toCity": "Indonesia",
        "QuoteIds": [
          10
        ],
        "options": 1
      },
      "10": {
        "budget": 384,
        "toCity": "Hong Kong",
        "QuoteIds": [
          11,
          12
        ],
        "options": 2
      },
      "11": {
        "budget": 232,
        "toCity": "Qatar",
        "QuoteIds": [
          13
        ],
        "options": 1
      },
      "22": {
        "budget": 254,
        "toCity": "Algeria",
        "QuoteIds": [
          14
        ],
        "options": 1
      },
      "23": {
        "budget": 241,
        "toCity": "Kuwait",
        "QuoteIds": [
          15
        ],
        "options": 1
      },
      "24": {
        "budget": 175,
        "toCity": "Israel",
        "QuoteIds": [
          16,
          17
        ],
        "options": 2
      },
      "25": {
        "budget": 266,
        "toCity": "Oman",
        "QuoteIds": [
          18,
          19
        ],
        "options": 2
      },
      "28": {
        "budget": 762,
        "toCity": "Argentina",
        "QuoteIds": [
          20,
          21
        ],
        "options": 2
      },
      "30": {
        "budget": 78,
        "toCity": "Iceland",
        "QuoteIds": [
          22
        ],
        "options": 1
      },
      "37": {
        "budget": 327,
        "toCity": "Canada",
        "QuoteIds": [
          23,
          24
        ],
        "options": 2
      },
      "39": {
        "budget": 238,
        "toCity": "Iran",
        "QuoteIds": [
          25
        ],
        "options": 1
      },
      "40": {
        "budget": 129,
        "toCity": "Cyprus",
        "QuoteIds": [
          26
        ],
        "options": 1
      },
      "41": {
        "budget": 267,
        "toCity": "United Arab Emirates",
        "QuoteIds": [
          27,
          28
        ],
        "options": 2
      },
      "42": {
        "budget": 252,
        "toCity": "Lebanon",
        "QuoteIds": [
          29
        ],
        "options": 1
      },
      "43": {
        "budget": 427,
        "toCity": "Iraq",
        "QuoteIds": [
          30
        ],
        "options": 1
      },
      "50": {
        "budget": 142,
        "toCity": "Montenegro",
        "QuoteIds": [
          31
        ],
        "options": 1
      },
      "55": {
        "budget": 418,
        "toCity": "Cuba",
        "QuoteIds": [
          32
        ],
        "options": 1
      },
      "56": {
        "budget": 492,
        "toCity": "China",
        "QuoteIds": [
          33,
          34
        ],
        "options": 2
      },
      "57": {
        "budget": 444,
        "toCity": "India",
        "QuoteIds": [
          35
        ],
        "options": 1
      },
      "62": {
        "budget": 477,
        "toCity": "Japan",
        "QuoteIds": [
          36,
          37
        ],
        "options": 2
      },
      "63": {
        "budget": 3377,
        "toCity": "Costa Rica",
        "QuoteIds": [
          38
        ],
        "options": 1
      },
      "65": {
        "budget": 210,
        "toCity": "Georgia",
        "QuoteIds": [
          39
        ],
        "options": 1
      },
      "66": {
        "budget": 391,
        "toCity": "Sri Lanka",
        "QuoteIds": [
          40,
          41
        ],
        "options": 2
      },
      "67": {
        "budget": 258,
        "toCity": "Russia",
        "QuoteIds": [
          42
        ],
        "options": 1
      },
      "68": {
        "budget": 82,
        "toCity": "Poland",
        "QuoteIds": [
          43
        ],
        "options": 1
      },
      "71": {
        "budget": 104,
        "toCity": "Finland",
        "QuoteIds": [
          44
        ],
        "options": 1
      },
      "72": {
        "budget": 150,
        "toCity": "Austria",
        "QuoteIds": [
          45,
          46
        ],
        "options": 2
      },
      "73": {
        "budget": 68,
        "toCity": "Spain",
        "QuoteIds": [
          47
        ],
        "options": 1
      },
      "75": {
        "budget": 106,
        "toCity": "Portugal",
        "QuoteIds": [
          48
        ],
        "options": 1
      },
      "77": {
        "budget": 37,
        "toCity": "Romania",
        "QuoteIds": [
          49
        ],
        "options": 1
      },
      "78": {
        "budget": 66,
        "toCity": "Sweden",
        "QuoteIds": [
          50
        ],
        "options": 1
      },
      "79": {
        "budget": 77,
        "toCity": "Denmark",
        "QuoteIds": [
          51
        ],
        "options": 1
      },
      "86": {
        "budget": 440,
        "toCity": "South Africa",
        "QuoteIds": [
          52,
          53
        ],
        "options": 2
      },
      "87": {
        "budget": 176,
        "toCity": "Morocco",
        "QuoteIds": [
          54,
          55
        ],
        "options": 2
      },
      "88": {
        "budget": 231,
        "toCity": "Serbia",
        "QuoteIds": [
          56
        ],
        "options": 1
      },
      "89": {
        "budget": 279,
        "toCity": "Bosnia and Herzegovina",
        "QuoteIds": [
          57
        ],
        "options": 1
      },
      "90": {
        "budget": 35,
        "toCity": "Italy",
        "QuoteIds": [
          58
        ],
        "options": 1
      },
      "92": {
        "budget": 72,
        "toCity": "Hungary",
        "QuoteIds": [
          59
        ],
        "options": 1
      },
      "93": {
        "budget": 155,
        "toCity": "Croatia",
        "QuoteIds": [
          60
        ],
        "options": 1
      },
      "94": {
        "budget": 160,
        "toCity": "Malta",
        "QuoteIds": [
          61,
          62
        ],
        "options": 2
      },
      "95": {
        "budget": 163,
        "toCity": "Greece",
        "QuoteIds": [
          63,
          64
        ],
        "options": 2
      },
      "96": {
        "budget": 67,
        "toCity": "Ireland",
        "QuoteIds": [
          65
        ],
        "options": 1
      },
      "97": {
        "budget": 60,
        "toCity": "Netherlands",
        "QuoteIds": [
          66
        ],
        "options": 1
      },
      "98": {
        "budget": 68,
        "toCity": "Norway",
        "QuoteIds": [
          67
        ],
        "options": 1
      },
      "99": {
        "budget": 71,
        "toCity": "Latvia",
        "QuoteIds": [
          68
        ],
        "options": 1
      },
      "100": {
        "budget": 261,
        "toCity": "Belgium",
        "QuoteIds": [
          69
        ],
        "options": 1
      },
      "101": {
        "budget": 60,
        "toCity": "Bulgaria",
        "QuoteIds": [
          70
        ],
        "options": 1
      },
      "102": {
        "budget": 130,
        "toCity": "Switzerland",
        "QuoteIds": [
          71
        ],
        "options": 1
      },
      "103": {
        "budget": 140,
        "toCity": "Ukraine",
        "QuoteIds": [
          72
        ],
        "options": 1
      },
      "104": {
        "budget": 72,
        "toCity": "France",
        "QuoteIds": [
          73
        ],
        "options": 1
      },
      "105": {
        "budget": 56,
        "toCity": "Lithuania",
        "QuoteIds": [
          74
        ],
        "options": 1
      },
      "106": {
        "budget": 51,
        "toCity": "United Kingdom",
        "QuoteIds": [
          75
        ],
        "options": 1
      },
      "109": {
        "budget": 116,
        "toCity": "Czech Republic",
        "QuoteIds": [
          76
        ],
        "options": 1
      },
      "110": {
        "budget": 59,
        "toCity": "Germany",
        "QuoteIds": [
          77
        ],
        "options": 1
      },
      "113": {
        "budget": 272,
        "toCity": "Bahrain",
        "QuoteIds": [
          78,
          79
        ],
        "options": 2
      },
      "128": {
        "budget": 634,
        "toCity": "New Zealand",
        "QuoteIds": [
          80
        ],
        "options": 1
      },
      "147": {
        "budget": 610,
        "toCity": "Australia",
        "QuoteIds": [
          81
        ],
        "options": 1
      },
      "167": {
        "budget": 187,
        "toCity": "Moldova",
        "QuoteIds": [
          82
        ],
        "options": 1
      },
      "168": {
        "budget": 87,
        "toCity": "Slovakia",
        "QuoteIds": [
          83
        ],
        "options": 1
      },
      "175": {
        "budget": 119,
        "toCity": "Gibraltar",
        "QuoteIds": [
          84
        ],
        "options": 1
      },
      "178": {
        "budget": 545,
        "toCity": "Laos",
        "QuoteIds": [
          85
        ],
        "options": 1
      }
    },
    "misc": {
      "QuoteDateTime": "2017-04-21T13:56:00",
      "MinPrice": 326,
      "Direct": false,
      "QuoteId": 1,
      "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396"
    },
    "price": [
      326,
      392,
      374,
      434,
      382,
      470,
      451,
      112,
      314,
      518,
      384,
      553,
      232,
      254,
      241,
      175,
      199,
      422,
      266,
      1125,
      762,
      78,
      403,
      327,
      238,
      129,
      290,
      267,
      252,
      427,
      142,
      418,
      492,
      641,
      444,
      477,
      937,
      3377,
      210,
      713,
      391,
      258,
      82,
      104,
      160,
      150,
      68,
      106,
      37,
      66,
      77,
      624,
      440,
      176,
      287,
      231,
      279,
      35,
      72,
      155,
      210,
      160,
      163,
      200,
      67,
      60,
      68,
      71,
      261,
      60,
      130,
      140,
      72,
      56,
      51,
      116,
      59,
      374,
      272,
      634,
      610,
      187,
      87,
      119,
      545
    ],
    "outbound": {
      "DepartureDate": "2017-05-18T00:00:00",
      "Carrier": "WOW air",
      "DestinationId": "EWR",
      "OriginId": "LGW"
    },
    "airline": [
      "WOW air",
      "Lufthansa",
      "Gulf Air",
      "EVA Air",
      "Turkish Airlines",
      "British Airways",
      "Turkish Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "Singapore Airlines",
      "Air India",
      "British Airways",
      "Pegasus Airlines",
      "Vueling Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "Monarch",
      "Oman Air",
      "Turkish Airlines",
      "British Airways",
      "United",
      "WOW air",
      "Air Transat",
      "WestJet",
      "Pegasus Airlines",
      "Cobalt",
      "Royal Brunei ",
      "Turkish Airlines",
      "Pegasus Airlines",
      "Pegasus Airlines",
      "easyJet",
      "KLM",
      "Austrian Airlines",
      "British Airways",
      "Air India",
      "Alitalia",
      "British Airways",
      "Avianca",
      "Pegasus Airlines",
      "SriLankan Airlines",
      "Qatar Airways",
      "Pegasus Airlines",
      "Wizz Air",
      "Norwegian",
      "eurowings",
      "eurowings",
      "Vueling Airlines",
      "Monarch",
      "Blue Air",
      "Norwegian",
      "Norwegian",
      "Virgin Atlantic",
      "Ethiopian Airlines",
      "Iberia",
      "Thomson Airways",
      "Wizz Air",
      "Pegasus Airlines",
      "Flybe",
      "Wizz Air",
      "Monarch",
      "Air Malta",
      "easyJet",
      "Pegasus Airlines",
      "Aegean Airlines",
      "Aer Lingus",
      "Vueling Airlines",
      "Norwegian",
      "Wizz Air",
      "eurowings",
      "Wizz Air",
      "SWISS",
      "Ukraine International",
      "Vueling Airlines",
      "Wizz Air",
      "Flybe",
      "Flybe",
      "Flybe",
      "British Airways",
      "Pegasus Airlines",
      "Qatar Airways",
      "Royal Brunei ",
      "Wizz Air",
      "Wizz Air",
      "Monarch",
      "Singapore Airlines"
    ],
    "inbound": {
      "DepartureDate": "2017-05-22T00:00:00",
      "Carrier": "Norwegian",
      "OriginId": "JFK",
      "DestinationId": "LGW"
    }
  },
  {
    "misc": {
      "QuoteDateTime": "2017-04-19T06:33:00",
      "MinPrice": 392,
      "Direct": true,
      "QuoteId": 2,
      "skyLink": "http://partners.api.skyscanner.net/apiservices/referral/v1.0/AU/AUD/en-US/anywhere/amd/2017-05-18/2017-05-22?apiKey=wc161029621991497683276175998396"
    },
    "outbound": {
      "DepartureDate": "2017-05-18T00:00:00",
      "Carrier": "Lufthansa",
      "DestinationId": "EWR",
      "OriginId": "LHR"
    },
    "inbound": {
      "DepartureDate": "2017-05-22T00:00:00",
      "Carrier": "Austrian Airlines",
      "OriginId": "EWR",
      "DestinationId": "LHR"
    }
  }
]

Your responseJson[0].routes is an object, not iterable. Use a pipe, or get the keys as an array like Object.keys(responseJson[0].routes) and iterate over it. — Ashish Ranjan
– Ashish Ranjan, Commented May 4, 2017 at 4:16
Angular templates and *ngFor don't do anything with JSON values, except maybe print them as strings. I guess you mean a "nested JavaScript object"? Also, please format the code portions of your question as code (using backticks). — user663031
– user663031, Commented May 4, 2017 at 5:28

AVJT82 · Accepted Answer · 2017-05-04 06:11:59Z

6

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

answered May 4, 2017 at 6:11

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

Rivs Over a year ago

Perfect. Kudos.

Barr J Over a year ago

Took me a while to figure with my data structure but your solution worked just fine! Cheers!

Dylan · Accepted Answer · 2017-05-04 05:39:04Z

1

You will want to convert your object to an iterable array.

  this.http.get('data.json')
            .subscribe((res) => {
               let keyArr: any[] = Object.keys(res.json()[0].routes);
               keyArr.forEach((key: any) => {
                  this.data.push(res.json()[0].routes[key]);
               });
            });

Here's a Plunker

answered May 4, 2017 at 5:39

Dylan

4,7831 gold badge22 silver badges27 bronze badges

2 Comments

Rivs Over a year ago

Thank you Dylan. Also this way of getting array out of object works.

Optiq Over a year ago

Does this work on objects nested inside each object as well or do we need to add more to it for that? I use Firebase as my database and this is EXACTLY what I need to use. I need to have an array of questions that have an array of answers and possibly another array of questions with answers nested inside of them. Will this work on the entire thing or just the top level object?

Suneet Bansal · Accepted Answer · 2017-05-04 05:00:23Z

Your routes should be defined as an json array however you have done a workaround to make routes as an array where you have explicitly given indexs (0, 1 ..) which is not correct.

Solution is attached below:

JSON should look like below:

[
  {
    "routes": [{
                "budget": 326,
                "toCity": "United States",
                "QuoteIds": [
                    1,
                    2
                ],
                "options": 2
            }, {
                "budget": 374,
                "toCity": "Thailand",
                "QuoteIds": [
                    3,
                    4
                ],
                "options": 2
            }
        ]
    }
]

Way to assign it

this.routes=resonseJson[0]['routes']

Way to iterate it in html

<div *ngFor="let route of routes">
    {{route.toCity}}
</div>

Vishal · Accepted Answer · 2017-05-04 05:09:37Z

0

You have to iterate over object keys and not array elements. Hence either use

Object.keys(responseJson[0].routes)

that will return ["0","1", ..."178"]. Then use below:

in component .ts :

routes : any = responseJson[0].routes;

in template :

<div *ngFor="let key of Object.keys(routes)"> 
    {{routes.key.budget}}    
</div>

answered May 4, 2017 at 5:09

Vishal

11k23 gold badges90 silver badges136 bronze badges

Collectives™ on Stack Overflow

How to do ngFor loop on nested json object?

4 Answers 4

Demo

2 Comments

2 Comments

JSON should look like below:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

JSON should look like below:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related