[英]Angular5: Convert nested object to nested array for using in ngFor
I have a nested object like this: 我有一个这样的嵌套对象:
data = [
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0002",
"type": "donut",
"name": "Raised",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
},
{
"id": "0003",
"type": "donut",
"name": "Old Fashioned",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
]
I would like to traverse through this object and display batter
object data in my html using *ngFor
but when i nest the *ngFor
to achieve the same like this: 我想遍历此对象并使用
*ngFor
在html中显示batter
对象数据,但是当我嵌套*ngFor
来实现如下效果时:
<div *ngFor="let item of data">
<!--Display first level elements here-->
<div *ngFor="let batter of item.batters">
<!--Display secondlevel elements here-->
</div>
</div>
i am getting the following error saying 我收到以下错误提示
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
How can i convert this nested object to nested array ? 如何将这个嵌套对象转换为嵌套数组? or is there a better way to flatten this Object using Typescript/EcmaScript/RxJS ?
还是有更好的方法使用Typescript / EcmaScript / RxJS来对此对象进行展平?
After Edit: the json structure looks weird. 编辑后:json结构看起来很奇怪。 To iterate trough batters it should be something like this I guess.
我想要迭代槽面糊应该是这样的。
<div *ngFor="let item of data">
<div *ngFor="let i of item.batters.batter">
{{i.id}}, {{i.type}
</div>
</div>
It occurs, because you try to iterate object in loop, not array, look here: 发生这种情况的原因是,您尝试在循环中而不是数组中循环访问对象,请看这里:
"batters":{
"batter":
[
{ "id": "1001", "type": "Regular" }
]
},
This can be simplified, I believe to this output format: 我相信可以简化此输出格式:
"batters":[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Regular" }
]
It looks better and it will work in your case. 看起来更好,可以在您的情况下使用。
Simple: 简单:
let part = "batters":
{
"batter":
[]}
let extract = part["betters"]["batter"];
mainOrray["betters"] = extract;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.