How do I make an ngFor loop on a nested json object?
It seems to be simple, but somehow I didn't get an internal array element for an ngFor loop on Angular 2.
I have a json array as shown below and I need to iterate over the available "routes" in my response array which is a nested element. Now can someone let me know how I can get a route that should be simple and I am trying like this.routes = responseeJson [0] .routes Or this.routes = resonseJson [0] ['routes'] but bad luck. Please consider my entry level here on Angular 2 or tell me how to work 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"
}
}
]
+3
source to share
4 answers
You got some good answers here, but everyone is manipulating your answer and changing it instead of treating it as it is. There are other data in your answer and you want to save the data, so use a solution using Pipe instead.
You seem to have two objects in your array, but only one contains routes
. Will it always be this way? If not, you can iterate through the answer and show all routes (if exists) for all objects, so I iterate over the array first and then iterate over 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 pipe key:
@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 answer and you have access to all the other data that comes with the answer.
Demo
+4
source to share
Your routes must be defined as a json array, however you did a workaround to create routes as an array in which you explicitly specified the indices (0, 1 ..) which is not correct.
The solution is attached below:
JSON should look like this:
[
{
"routes": [{
"budget": 326,
"toCity": "United States",
"QuoteIds": [
1,
2
],
"options": 2
}, {
"budget": 374,
"toCity": "Thailand",
"QuoteIds": [
3,
4
],
"options": 2
}
]
}
]
The way to assign it
this.routes=resonseJson[0]['routes']
The way to iterate in html
<div *ngFor="let route of routes">
{{route.toCity}}
</div>
0
source to share
You need to iterate over the keys of the objects, not the elements of the array. Hence, either use
Object.keys(responseJson[0].routes)
which will return ["0", "1", ... "178"]. Then use below:
in component .ts:
routes : any = responseJson[0].routes;
in the template:
<div *ngFor="let key of Object.keys(routes)">
{{routes.key.budget}}
</div>
0
source to share