Angular 8 - Get data in HTML Template (from array within array within another array)

Question

Good day.

I have an API that produces this output:

(4) [{…}, {…}, {…}, {…}]
0:
    dueDate: "2018-03-26T00:00:00"
    priority: {priorityId: 1, priorityName: "Critical", priorityColor: "red"}
    statuses: Array(1)
    0:
          status: {statusId: 1, statusName: "New", statusColor: "lightblue", ticketStatuses: Array(0)}

In my Angular HTML Template:

<td mat-cell *matCellDef="let row"> {{ row.priority.priorityName }}</td>

Produces: Critical (as one would expect)

But in the following statement that has an additional array:

<td mat-cell *matCellDef="let row"> {{ row.statuses.status.statusName }}</td>

Produce ERROR TypeError: Cannot read property 'statusName' of undefined

I expected a result "New"

Hope someone can help me out here.

Nicholas K · Accepted Answer · 2019-12-07 10:00:20Z

3

You need to use

<td mat-cell *matCellDef="let row"> {{ row.statuses[0].status.statusName }}</td>

since statuses is an array.

answered Dec 7, 2019 at 10:00

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Angular 8 - Get data in HTML Template (from array within array within another 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