Показать данные из файла json в angular

Question

У меня есть следующий файл Json, и я хочу вывести данные в виде категорий (пицца, паста) и затем подкатегорий (пицца маргарита, пицца прошутто) и то же самое для макаронных изделий и для каждого, чтобы иметь выбор, точно так же, как Структура в файле.

Это файл json, который я хотел вывести. Я использую ngfor для l oop через массив, но как отобразить из первого варианта обе категории?

    [
    {
    "name" : "Pizza", 
    "category": [
        {
            "name": "Pizza Marquerita",
            "choices": [
                {
                    "name": "Crust",
                    "addons" : [
                        {
                            "name": "Crispy"
                        },
                        {
                            "name": "Fluffy"
                        }
                    ]
                },
                {
                    "name": "Extra Toppings",
                    "addons" : [
                        {
                            "name": "Olives"
                        },
                        {
                            "name": "Mushrooms"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Pizza Prosciutto",
            "choices": [
                {
                    "name": "Crust",
                    "addons" : [
                        {
                            "name": "Crispy"
                        },
                        {
                            "name": "Fluffy"
                        }
                    ]
                },
                {
                    "name": "Extra Toppings",
                    "addons" : [
                        {
                            "name": "Olives"
                        },
                        {
                            "name": "Mushrooms"
                        }
                    ]
                }
            ]
        }
    ],
    "choices": [
        {
            "name": "Crust",
            "addons" : [
                {
                    "name": "Crispy"
                },
                {
                    "name": "Fluffy"
                }
            ]
        },
        {
            "name": "Extra Toppings",
            "addons" : [
                {
                    "name": "Olives"
                },
                {
                    "name": "Mushrooms"
                }
            ]
        }
    ]},
    {
    "name" : "Pasta", 
    "category": [
        {
            "name": "Spaghetti Bolognese",
            "choices": [
                {
                    "name": "Pasta Type",
                    "addons" : [
                        {
                            "name": "Spaghetti"
                        },
                        {
                            "name": "Tagliatelle"
                        }
                    ]
                },
                {
                    "name": "Extra Toppings",
                    "addons" : [
                        {
                            "name": "extra sea food"
                        },
                        {
                            "name": "truffle"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Spaghetti Frutti di Mare",
            "choices": [
                {
                    "name": "Pasta Type",
                    "addons" : [
                        {
                            "name": "Spaghetti"
                        },
                        {
                            "name": "Tagliatelle"
                        }
                    ]
                },
                {
                    "name": "Extra Toppings",
                    "addons" : [
                        {
                            "name": "extra sea food"
                        },
                        {
                            "name": "truffle"
                        }
                    ]
                }
            ]
        }
    ],
    "choices": [
        {
            "name": "Pasta Type",
            "addons" : [
                {
                    "name": "Spaghetti"
                },
                {
                    "name": "Tagliatelle"
                }
            ]
        },
        {
            "name": "Extra Toppings",
            "addons" : [
                {
                    "name": "extra sea food"
                },
                {
                    "name": "truffle"
                }
            ]
        }
    ]}

]

В файле .ts я импортирую данные импорта файла из '../../assets /data.json '; и затем объявите это как меню: any = data;

in html Я хочу вывести данные в виде карты просто что-то простое. Если я использую это так. в нем представлены пицца Маргарита и спагетти Болоньезе под пиццей

    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Restaurant Name</h5>
  </div>
  <div class="card-header">Pizza</div>
  <ul class="list-group list-group-flush">
  <li class="list-group-item" *ngFor="let menu of menus">{{menu.category[0].name}}</li>
  </ul>
  <div class="card-header">Pasta</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">test</li>
  </ul>
</div>

Answer 1

Вы также можете использовать приведенный ниже код. Я думаю, что это будет удалить избыточный код.

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Restaurant Name</h5>
    </div>
    <span *ngFor="let data of menus">
        <div class="card-header">{{data.name}}</div>
        <ul class="list-group list-group-flush">
        <li class="list-group-item" *ngFor="let menu of data.category">{{menu.name}}</li>
        </ul>
    </span>
</div>

и ваши данные здесь

menus: any = [
    {
    name : "Pizza", 
    category: [
        {
            name: "Pizza Marquerita",
            choices: [
                {
                    name: "Crust",
                    addons : [
                        {
                            name: "Crispy"
                        },
                        {
                            name: "Fluffy"
                        }
                    ]
                },
                {
                    name: "Extra Toppings",
                    addons : [
                        {
                            name: "Olives"
                        },
                        {
                            name: "Mushrooms"
                        }
                    ]
                }
            ]
        },
        {
            name: "Pizza Prosciutto",
            choices: [
                {
                    name: "Crust",
                    addons : [
                        {
                            name: "Crispy"
                        },
                        {
                            name: "Fluffy"
                        }
                    ]
                },
                {
                    name: "Extra Toppings",
                    addons : [
                        {
                            name: "Olives"
                        },
                        {
                            name: "Mushrooms"
                        }
                    ]
                }
            ]
        }
    ],
    choices: [
        {
            name: "Crust",
            addons : [
                {
                    name: "Crispy"
                },
                {
                    name: "Fluffy"
                }
            ]
        },
        {
            name: "Extra Toppings",
            addons : [
                {
                    name: "Olives"
                },
                {
                    name: "Mushrooms"
                }
            ]
        }
    ]},
    {
    name : "Pasta", 
    category: [
        {
            name: "Spaghetti Bolognese",
            choices: [
                {
                    name: "Pasta Type",
                    addons : [
                        {
                            "name": "Spaghetti"
                        },
                        {
                            "name": "Tagliatelle"
                        }
                    ]
                },
                {
                    name: "Extra Toppings",
                    addons : [
                        {
                            name: "extra sea food"
                        },
                        {
                            name: "truffle"
                        }
                    ]
                }
            ]
        },
        {
            name: "Spaghetti Frutti di Mare",
            choices: [
                {
                    name: "Pasta Type",
                    addons : [
                        {
                            name: "Spaghetti"
                        },
                        {
                            name: "Tagliatelle"
                        }
                    ]
                },
                {
                    name: "Extra Toppings",
                    addons : [
                        {
                            name: "extra sea food"
                        },
                        {
                            name: "truffle"
                        }
                    ]
                }
            ]
        }
    ],
    choices: [
        {
            name: "Pasta Type",
            addons : [
                {
                    name: "Spaghetti"
                },
                {
                    name: "Tagliatelle"
                }
            ]
        },
        {
            name: "Extra Toppings",
            addons : [
                {
                    name: "extra sea food"
                },
                {
                    name: "truffle"
                }
            ]
        }
    ]}
]

Answer 2

Просто попробуйте этот код:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Restaurant Name</h5>
  </div>
  <div class="card-header">Pizza</div>
  <ul class="list-group list-group-flush">
  <li class="list-group-item" *ngFor="let menu of menus[0].category">{{menu.name}}</li>
  </ul>
  <div class="card-header">Pasta</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item" *ngFor="let menu1 of menus[1].category">{{menu1.name}}</li>
  </ul>
</div>

Вы должны использовать правильные элементы ng для элементов.

{{menu.category[0].name}} даст только название 1-й категории пиццы.