Angular2, Typescript,Json - json

Question

I am going to use angular2 platform to develop an application. I am stuck at one point that "How do I print nested json in Angular2 Component's template".
json file:
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": "0000.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" }
]
}
It's greatful if someone help me....:)

Answer 1

Try something like this:
<div *ngFor="let obj of jsonData">
<div>{{obj.id}}</div>
...
<div *ngFor="let bat of obj.batters.batter">
<div>{{bat.id}}</div>
<div>{{bat.type}}</div>
</div>
<div *ngFor="let topp of obj.topping">
<div>{{topp.id}}</div>
<div>{{topp.type}}</div>
</div>
</div>
You can change your object:
...,
"batters": [
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
],
...
then you can do like this:
<div *ngFor="let bat of obj.batters">
Hope this will help.