ngFor in angular with array of array

Question

List item:

jsonObject = [
    {
      place: 'place1',
      fatherDetails: [
        {name: 'place1_father1', adharId: 134567},
        {name: 'place1_father2', adharId: 124567},
      ],
      motherDetails: [
        {name: 'place1_mother1', adharId: 123456},
        {name: 'place1_mother2', adharId: 123457},
        {name: 'place1_mother3', adharId: 123467},
      ],
    },
    {
      place: 'place2',
      fatherDetails: [
        {name: 'place2_father1', adharId: 123567},
        {name: 'place2_father2', adharId: 12567},
      ],
      motherDetails: [
        {name: 'place2_mother1', adharId: 1234567},
        {name: 'place2_mother2', adharId: 1234567},
        {name: 'place2_mother3', adharId: 1234567},
      ],
    }
  ];

How do I loop all the fatherDetails objects in HTML with ngFor? Basically, I require something like this:

<mat-option *ngFor = "let father of jsonObject">
   {{father.name}}
</mat-option>

But, this doesn't work. Because, it has to loop twice.

@MaruthiEranki before you ask for something, please mention what you have tried, do you have done any research, and do you know how to use ngFor, if you your basic is not clear refer https://angular.io/guide/structural-directives. — Ankit Prajapati
– Ankit Prajapati, Commented Oct 14, 2019 at 5:58

Dane Brouwer · Accepted Answer · 2019-10-14 06:25:31Z

1

This can be easily achieved using Angular's ng-container.

    <ng-container *ngFor="let object of jsonObject>
        <mat-option *ngFor = "let father of object.fatherDetails">
            {{father.name}}
        </mat-option>
    </ng-container

ng-container won't clutter your DOM with unnecessary divs and allows you to access that nested array.

answered Oct 14, 2019 at 6:25

Dane Brouwer

2,9821 gold badge26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eranki Over a year ago

Thank you. This helped me and I was looking for something like ng-container.

Paaarth · Accepted Answer · 2019-10-14 05:15:53Z

Note You need to iterate the first loop and the second loop will be iterated inside the first loop's array of object.

jsonObject = [{
    place: 'place1',
    fatherDetails: [{
        name: 'place1_father1',
        adharId: 134567
      },
      {
        name: 'place1_father2',
        adharId: 124567
      },
    ],
    motherDetails: [{
        name: 'place1_mother1',
        adharId: 123456
      },
      {
        name: 'place1_mother2',
        adharId: 123457
      },
      {
        name: 'place1_mother3',
        adharId: 123467
      },
    ],
  },
  {
    place: 'place2',
    fatherDetails: [{
        name: 'place2_father1',
        adharId: 123567
      },
      {
        name: 'place2_father2',
        adharId: 12567
      },
    ],
    motherDetails: [{
        name: 'place2_mother1',
        adharId: 1234567
      },
      {
        name: 'place2_mother2',
        adharId: 1234567
      },
      {
        name: 'place2_mother3',
        adharId: 1234567
      },
    ],
  }
];

<tr *ngFor="let object of jsonObject;let i = index;">
  <td>{{i}}</td>
  <td * ngFor="let o of object.motherDetails">{{o}}</td>
</tr>

Oleksandr Poshtaruk · Accepted Answer · 2019-10-14 05:16:08Z

1

Just extract fatherDetails from all items, flat array and iterate over it

In componeng class:

 this.allfathersDetails = this.jsonObject.map( item => item.fatherDetails).flat();

In a template:

 <div *ngFor="let details of allfathersDetails">
 ...

answered Oct 14, 2019 at 5:16

Oleksandr Poshtaruk

2,20618 silver badges20 bronze badges

2 Comments

Eranki Over a year ago

Thank you, Is there any option without creating a variable?

Oleksandr Poshtaruk Over a year ago

You can try to use <div *ngFor="let details of jsonObject.map( item => item.fatherDetails).flat()"> but may be bad for perfomance

Pushprajsinh Chudasama · Accepted Answer · 2019-10-14 05:48:45Z

0

You can try this code.

<div *ngFor = "let object of jsonObject">
<div *ngFor ="let father of object.fatherDetails>
<span>{{father.name}}</span>
</div>
</div>

answered Oct 14, 2019 at 5:48

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

5 Comments

Eranki Over a year ago

Yeah. It works with <div>. But, I'm working with <mat-select> and <mat-option>.

Pushprajsinh Chudasama Over a year ago

You can write first ngFor in mat-select and second ngFor in mat-option.If it works than please upvote.

Eranki Over a year ago

Dude, it's displaying multiple select boxes which means it is looping the select and not looping values in select box.

Pushprajsinh Chudasama Over a year ago

You can store fatherdetails array in other array in ts file.

Eranki Over a year ago

Yeah. That's how I'm working now presently and trying to avoid using extra variable. Thank you.

Collectives™ on Stack Overflow

ngFor in angular with array of array

4 Answers 4

1 Comment

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related