Recibo datos JSON de una API que también tiene algunos objetos secundarios. La API tiene un nivel de menú y, en el menú, está comiendo. Lo que quiero hacer es mostrar las comidas relacionadas con cada menú debajo del menú
JSON de API
[{"id":6,"name":"Menu 1","serveDate":"2019-05-10","meals":[{"id":13,"name":"Rice with Stew","description":"rice","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":5,"name":"Menu 2","serveDate":"2019-06-10","meals":[{"id":13,"name":"Corn Flakes,"description":"Flakes","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":4,"name":"Menu 3","serveDate":"2019-07-10","meals":[]}]
Html
<div *ngFor="let item of menuList">
<h2>Menu</h2>
{{item.name}} - {{item.servate}}
<h2 *ngFor="let item of menuList.meals">Meals</h2>
{{item.name}} - {{item.mealType}}
</div>
Js
getMenus() {
this.menuServices.menuList(this.pagedData)
.subscribe(
response => {
if (response && response.code === HttpStatus.OK) {
this.menuList = response.data;
}
},
);
}
¿Alguna ayuda sobre cómo hacer que esto funcione correctamente como debería funcionar?
3 respuestas
No es necesario acceder a la lista principal ya que tiene su matriz de comidas en el objeto objeto.
Cambiar código HTML a:
<div *ngFor="let item of menuList">
<h2>Menu</h2>
{{item.name}} - {{item.servate}}
<h2>Meals</h2>
<div *ngFor="let item of item.meals">
{{item.name}} - {{item.mealType}}
</div>
</div>
Cuando estás haciendo algo como let item of menuList eso significa que la variable item debe usarse para referirse a un elemento individual dentro de tu ciclo. Para evitar confusiones, también recomendaría nombrar estos item vars para bucles anidados de manera diferente. Otra cosa importante a tener en cuenta es que todo el marcado que desea generar para cada elemento de la matriz debe estar envuelto con un elemento con *ngFor. No es el caso con su etiqueta <h2> que se imprime para cada comida, pero no la descripción de la comida.
Edite la plantilla de la siguiente manera:
<div *ngFor="let menuItem of menuList">
<h1>Menu</h1>
<h2>{{menuItem.name}} - {{menuItem.serveDate}}</h2>
<p>maybe description here</p>
<h3>Meals</h2>
<p *ngFor="let mealItem of menuItem.meals">{{mealItem.name}} - {{mealItem.mealType}}</p>
</div>
<div *ngFor="let menu of menuList">
<h2>Menu</h2>
{{menu.name}} - {{menu.servate}}
<h2>Meals</h2>
<ng-container *ngFor="let meal of menu.meals">
{{meal.name}} - {{meal.mealType}}
</ng-container>
</div>
De esta manera, no tiene que agregar divs innecesarios ni ninguna otra etiqueta html para realizar un bucle en angular.
Esta es la manera perfecta de hacer bucles anidados sin cambiar su html
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].