如何对嵌套的json对象执行ngFor循环？
如何对嵌套的json对象执行ngFor循环？
提问于 2017-05-04 04:02:50
这似乎很简单，但不知何故，我没有让内部数组元素在角2上执行ngFor循环。
我有如下所示的json数组，我需要在我的响应数组(嵌套元素)中遍历可用的“路由”。现在谁能让我知道如何获得路线，这应该是简单的，我正在尝试像this.routes=respondeJson.routes或this.routes=resonseJson，但没有运气。请帮助考虑我的入门水平在这里的角度2，或者说与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"
}
}
]回答 4
Stack Overflow用户
回答已采纳
发布于 2017-05-04 06:11:59
你在这里得到了一些很好的答案，但是所有的人都在操纵你的反应，改变它的构建，而不是按原样对待它。您的响应中还有其他一些数据，并且希望保留这些数据，因此这里有一个使用管道的解决方案。
您的数组中似乎有两个对象，但只有一个包含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>然后钥匙管：
@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;
}
}
}这样，您就没有操作您的响应，并且您可以访问响应附带的所有其他数据。
演示
Stack Overflow用户
发布于 2017-05-04 05:39:04
您将希望将对象转换为可迭代数组。
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]);
});
});Stack Overflow用户
发布于 2017-05-04 05:00:23
您的路由应该定义为一个json数组，但是您已经完成了一个解决方案，将路由作为一个数组，在其中您已经显式地给出了索引(0，1 ..)这是不对的。
解决办法附后：
JSON应该如下所示：
[
{
"routes": [{
"budget": 326,
"toCity": "United States",
"QuoteIds": [
1,
2
],
"options": 2
}, {
"budget": 374,
"toCity": "Thailand",
"QuoteIds": [
3,
4
],
"options": 2
}
]
}
]分配it的方法
this.routes=resonseJson[0]['routes']在html中迭代它的方法
<div *ngFor="let route of routes">
{{route.toCity}}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43773676
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号