display multiple nested data with angular6

Related searches

I'm receiving JSON data from an API which has some child objects as well. The API has a menu level and down the menu, it's having meals. What I want to do is to display meals relating to each menu under the menu

JSON from 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;
      }
    },

  );
}

Any help on how to make this work correctly the way it should work?

No need to access the main list as you have your meals array in the item object.

Change HTML Code to:

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

Nested Forms in Angular 6, A step-by-step guide to use nested forms within the latest version of Angular. Within the Cities, the users may have multiple address lines, so the users We have pushed the data into the Form arrays in the component, so in HTML we will iterate through this array to show the Address Lines and the Cities. Here we learn more about Angularjs nested JSON where we have JSON array object which further contains array objects. .i.e array of array. So to display JSON data we use the nested ng-repeat directive in our Angularjs example. About ng-repeat: In AngularJs the ng-repeat directive is used to loop through items in the collection of an element (DOM).

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

Using this way you don't have to add unnecessary divs or any other html tag for looping in angular.

this is the perfect way to do nested loops without changing your html

Passing data between nested components with Angular - DEV, The problem with two-way data binding is the potential for unexpected Create a parent and child component that is nested in the parent. Declare the first name property as the default to display upon construction of the� Understanding ngFor In Angular. Simply put, ngFor in Angular is used for iterating over the data object and creating the view dynamically. Let’s try to understand ngFor in Angular using an example. Let’s define some dummy data inside the app.component.ts file’s constructor.

When you're doing something like let item of menuList that means the item variable should be used to refer to an individual item within your loop. To avoid confusion, I'd also recommend naming these item vars for nested loops differently. Another important thing to keep in mind that all the markup that you want to be output for each array item should be wrapped with an element with *ngFor. It's not the case with your <h2> tag being printed for each meal, but not the meal description.

Edit the template as follows:

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

how to access nested json object in angular, get value from a nested json array in angularjs template how to access nested json object Duration: 10:37 Posted: Mar 21, 2020 To display data in Angular, we can use the Angular httpclient module to send a network request to a server and fetch the data and then use the ngFor directive to render the data to the frontend. If you are new to Angular 9, then check out this Angular 9 CRUD Tutorial article. Let’s see one by one step to display data in Angular 9.

NgFor does not support multiple nested levels � Issue #21541 , NgFor does not support multiple nested levels #21541 objects from this point of view), then JavaScript compares internal references which are @Leningsv hmm, I am trying to make an immutable data of listaCanalVenta� In this Angular Tutorial, we will see how we can display list data using the ngFor directive in Angular. We will simply use Angular CLI to bootstrap our app. CLI installation is out f the scope of this article, this article assumes you have angular CLI installed.

I changed my implementation of an EXTREMELY deeply nested , Do you have a deeply nested data structure? Do you have to “Angular 7, Reactive Form slow response when has large data” So we'll have to implement multiple methods for each FormGroup type. Let me show you the code so that it's better for you to understand the gibberish I'm throwing at you🤪:� Here Mudassar Ahmed Khan has explained with an example, how to use AngularJS ng-repeat directive with complex nested JSON objects. Complex nested JSON objects comprises of a JSON object array and each object of the JSON array consisting of another child JSON object array. In such scenario, one has to make use of nested ng-repeat directive i.e. one ng-repeat directive inside another ng-repeat

10 Best Multiple Select Libraries For Angular Apps (2020 Update) A Multiple Select enables your users to select multiple items/options in an efficient way. Here is a hand-picked collection of 10 best free Multiple Select components, directives, and other related libraries for Angular apps.

Comments
  • <h2>Meals</h2> should be outside of the loop.
  • @JED yes its part of UI I thought he put menu inside <h2> so added meals inside <h2>