Using ngFor in Angular with an array consisting of nested arrays

Question

Using ngFor in Angular with an array consisting of nested arrays

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},
      ],
    }
  ];

I am trying to figure out how to use ngFor in HTML to loop through all the fatherDetails objects. Here's what I have attempted:

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

Unfortunately, this code isn't working as intended because it needs to iterate twice for proper looping.

angular typescript

Answer 1

Answer №1

You can easily accomplish this task by utilizing the ng-container feature in Angular.


    <ng-container *ngFor="let item of itemList>
        <mat-option *ngFor="let parent of item.parentDetails">
            {{parent.name}}
        </mat-option>
    </ng-container>

Using ng-container avoids cluttering your DOM with unnecessary elements and gives you access to nested arrays efficiently.

Answer 2

You can easily accomplish this task by utilizing the ng-container feature in Angular.


    <ng-container *ngFor="let item of itemList>
        <mat-option *ngFor="let parent of item.parentDetails">
            {{parent.name}}
        </mat-option>
    </ng-container>

Using ng-container avoids cluttering your DOM with unnecessary elements and gives you access to nested arrays efficiently.

Answer 3

Answer №2

Remember to loop through the first array and then iterate the second array within each object of the first array.

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>

Answer 4

Remember to loop through the first array and then iterate the second array within each object of the first array.

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>

Answer 5

Answer №3

To effectively retrieve fatherDetails from each item, create a flat array and loop through it

Within the component class:

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

In an HTML template:

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

Answer 6

To effectively retrieve fatherDetails from each item, create a flat array and loop through it

Within the component class:

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

In an HTML template:

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

Answer 7

Answer №4

Feel free to experiment with this piece of code.

<div *ngFor = "let item of itemList">
<div *ngFor ="let parent of item.parentDetails>
<span>{{parent.name}}</span>
</div>
</div>

Answer 8

Feel free to experiment with this piece of code.

<div *ngFor = "let item of itemList">
<div *ngFor ="let parent of item.parentDetails>
<span>{{parent.name}}</span>
</div>
</div>

Using ngFor in Angular with an array consisting of nested arrays

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with Angular Material: Default selection not being applied in mat-select component

What is the reason behind the possibility of assigning the exported class to a variable within Ionic 2?

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

What sets apart the browser/tab close event from the refresh event?

Tips for resolving errors in Angular controls

Toggle the visibility of a modal in code across various components in an Angular 4 project using Typescript

Loading an HTML file conditionally in an Angular 5 component

The link path in Angular 2 seems to be eluding me

Angular - Ensuring the Independence of Field Pairs During Validation

Is there a way to compile Node's global modules and objects using TypeScript while having the checkJs option enabled?

Generating a TypeScript type based on import.meta.glob's information

There is an issue with the Angular 2 provider when attempting to use useValue in conjunction with a function call

Tips for implementing HTTP requests in Angular 2 without TypeScript

What is the best way to transfer information between two components when working with an edit form?

Angular DOM not reflecting updates

activating serverless.yml for aws-xray

Having trouble invoking the "done" function in JQuery following a POST request

The issue of Undefined TypeError arises when using Angular HttpInterceptor and injecting any service

Displaying HTML content using Typescript