How to display multi dimensional array using ngFor?

Question

I am displaying data using below Json. it's working fine up-to two array while displaying third inner array i am getting error.kindly please suggest me how can successfully retrieve it.

<tr *ngFor="let priceRowData of solutionData.groups.requestDetails ;let $index=index ">
   <td>{{priceRowData.ReqId}}</td>
</tr>

New Json : solutiondetail -> groups - > request details

 {
        "SolutionsDetail": [
            {
                "SolutionId": 658,
                "name": "dk",
                "id": 1568377327000,
                "groups": [
                    {
                        "GroupId": 1,
                        "requestDetails": [
                            {
                                "ReqId": 2331,

                            },

                        ]
                    }

                ]
            }
        ]
    }

I just want to display all request-details id into UI. How can i achieve that here.

Pankaj Parkar · Accepted Answer · 2019-09-24 08:29:34Z

1

You can access array's element directly through property access. Since there are three nested array's, you have to loop all those array's to get access to their properties. So you will have to use 3 nested ngFor directive to list down all elements dynamically.

Html

<tr *ngFor="let priceRowData of SolutionsDetail">
  <ng-container *ngFor="let group of priceRowData.groups">
     <ng-container *ngFor="let requestDetail of group.requestDetails">
       <td>{{requestDetail.ReqId}}</td>
     </ng-container>
  </ng-container>
</tr>

Stackblitz

edited Sep 24, 2019 at 8:29

answered Sep 24, 2019 at 8:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

DharamChauhan Over a year ago

i 'm getting this ERROR TypeError: Cannot read property 'length' of undefined

John Over a year ago

@DharamChauhan sounds like one of the variables/properties that you think holds an array is actually undefined. Alternatively, one of the variables/properties is being changed to undefined while your app is running.

Collectives™ on Stack Overflow

How to display multi dimensional array using ngFor?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related