Angular loop within a loop - table from a 2 dimensional array

Question

I am using Angular 9.

I am trying to construct a dynamic table from a 2 dimensional array.

I have the following which displays the first element succesffully.

<mat-card class="approval-edit-card-nominated">
    Nominated Evaluators
    <div>
        {{nominationAllOf[0].nominations[0].evaluatorInfo.personalInfo.name.firstName}}
        {{nominationAllOf[0].nominations[0].evaluatorInfo.personalInfo.name.lastName}}
    </div>
</mat-card>

However, I want to make a table that displays all rows and columns. So I try the following:

<mat-card class="approval-edit-card-nominated">
    Nominated Evaluators {{nominationAllOf[0].nominations.length}}
    <div>
        <table>    
            <tr *ngFor="let nomination of nominationAllOf">
                <td *ngFor="let item of nomination">
                    {{item.evaluatorInfo.personalInfo.name.firstName}}
                    {{item.evaluatorInfo.personalInfo.name.lastName}}
                </td>
            </tr>
        </table>
    </div>
</mat-card>

The {{nominationAllOf[0].nominations.length}} is 3. But the table is just not displayed.

Question

How do I display the table from the 2 dimensional array?

Error

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Thanks

<td *ngFor="let item of nomination.nominations">

Prabesh Gouli
– Prabesh Gouli

2020-07-06 06:24:05 +00:00
Commented Jul 6, 2020 at 6:24 — Prabesh Gouli
– Prabesh Gouli, Commented Jul 6, 2020 at 6:24

Sebastian Kaczmarek · Accepted Answer · 2020-07-06 05:48:09Z

2

You are missing a .nominations in your inner loop:

<table>    
    <tr *ngFor="let nomination of nominationAllOf">
        <td *ngFor="let item of nomination.nominations">
            {{item.evaluatorInfo.personalInfo.name.firstName}}
            {{item.evaluatorInfo.personalInfo.name.lastName}}
        </td>
    </tr>
</table>

Tip: you can easily debug such cases by using json pipe. In this case, you could use:

<tr *ngFor="let nomination of nominationAllOf">
{{ nomination | json }}

and you would see the contents of the nomination object.

edited Jul 6, 2020 at 5:48

answered Jul 6, 2020 at 5:45

Sebastian Kaczmarek

8,5254 gold badges25 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

Angular loop within a loop - table from a 2 dimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related