Angular5: Convert nested object to nested array for using in ngFor

Question

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:

 <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 ?

Can you provide some more information? What does the code where you're using `*ngFor` actually look like? — ethan.roday, Mar 27 '18 at 21:28
What is the result that you're expecting? What will the object look like? Currently, with the current information, to me it looks like your problem is the JSON structure, and accessing `item.batters` instead of `item.batters.batter` in your `*ngFor`. — Amit Beckenstein, Mar 27 '18 at 22:40

Karabah · Answer 1 · 2018-03-28T01:02:08.730

1

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;

edited Mar 28 '18 at 01:02

answered Mar 28 '18 at 00:30

Karabah

229
1
4
12

Yes true , how can i actually take an existing nested object and then convert it to a nested array ? thats my problem – hakuna Mar 28 '18 at 00:51

BartV · Answer 2 · 2018-03-27T21:59:26.700

0

After Edit: the json structure looks weird. 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>

edited Mar 27 '18 at 21:59

answered Mar 27 '18 at 21:45

BartV

44
4

Sorry , that was a typo but thats not the issue. i have corrected that n my question. Probably you can delete this answer – hakuna Mar 27 '18 at 21:48
There is something wrong with your json structure. "batters" contains an object while "batter" contains an array. Sounds weird. – BartV Mar 27 '18 at 21:55

Angular5: Convert nested object to nested array for using in ngFor

2 Answers2