Angular2, Typescript,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....:)

Possible duplicate of How to parse json file in angular2 using multiple ngFor? — Keyur Shah
– Keyur Shah, Commented Dec 19, 2016 at 6:07
What do you mean by print? Did you mean displaying JSON on your HTML template? Or getting the data from your json file to a variable? — penleychan
– penleychan, Commented Dec 19, 2016 at 6:08
Please give more detail about what you are trying to accomplish. Example: I'm trying to display the batter array inside the nested object in my html <div>. — eko
– eko, Commented Dec 19, 2016 at 6:09
0001 donut Cake 0000.55 1001 Regular 1002 Chocolate topping 5001 None 5002 Glazed — Suraj Baviskar - DigitalEdu
– Suraj Baviskar - DigitalEdu, Commented Dec 20, 2016 at 5:42

Avnesh Shakya · Accepted Answer · 2016-12-19 06:16:17Z

0

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.

answered Dec 19, 2016 at 6:16

Avnesh Shakya

3,9162 gold badges25 silver badges32 bronze badges

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

4 Comments

Suraj Baviskar - DigitalEdu Over a year ago

I have tried it, but doesn't work for me. is there any other way like using pipes or something else.

Suraj Baviskar - DigitalEdu Over a year ago

Only the parent keys are visible i.e. id, name,type, ppu, batters. For child keys of batter and toppings, it returns [Object, Object], not values.

Avnesh Shakya Over a year ago

Update your question with template view how you trying.

Suraj Baviskar - DigitalEdu Over a year ago

Thank u Mr Avnesh Shakya. there is my error thats why its not executing. now its solved. Thank U very much.

Collectives™ on Stack Overflow

Angular2, Typescript,Json

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related