Angular5: конвертировать вложенный объект во вложенный массив для использования в ngFor

Question

У меня есть вложенный объект, как это:

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" }
                ]
        }
    ]

Я хотел бы пройти через этот объект и отобразить batter Данные объекта в моем HTML с помощью *ngFor но когда я вкладываю *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>

я получаю следующую ошибку, говоря

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Как я могу преобразовать этот вложенный объект во вложенный массив? или есть лучший способ сгладить этот объект с помощью Typescript/EcmaScript/RxJS?

Answer 1

После редактирования: структура json выглядит странно. Я полагаю, что для итераций через это должно быть что-то вроде этого.

<div *ngFor="let item of data">
   <div *ngFor="let i of item.batters.batter">
      {{i.id}}, {{i.type}
   </div>
</div>

Answer 2

Это происходит потому, что вы пытаетесь перебрать объект в цикле, а не в массиве, посмотрите здесь:

"batters":{
      "batter":
          [
             { "id": "1001", "type": "Regular" }
           ]
},

Это можно упростить, я верю в этот формат вывода:

"batters":[
   { "id": "1001", "type": "Regular" },
   { "id": "1002", "type": "Regular" }
]

Это выглядит лучше, и это будет работать в вашем случае.

Просто:

let part = "batters":
                {
                    "batter":
                        []}

let extract = part["betters"]["batter"];

mainOrray["betters"] = extract;