Displaying nested array with mat-table

Question

I'm working with an object which has a nested array, something like this

The Foo_Chain.Foo needs to be shown in different columns

ClientId | Foo_Type | Foo 1 | Foo 2

Foo_Type isn't being a problem, because I can access it easily, but the other 2 properties, belongs to Foo_Chain the nested array, and I'm having issues trying to display it

[
   {
      "clientId":"44",
      "Foo_Type":"XYZ",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"XYZ 1"
         },
         {
            "Imported":true,
            "Foo":"XYZ 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ABC",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ABC 1"
         },
         {
            "Imported":true,
            "Foo":"ABC 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ASR",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ASR 1"
         },
         {
            "Imported":true,
            "Foo":"ASR 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"LOP",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"LOP 1"
         },
         {
            "Imported":true,
            "Foo":"LOP 2"
         }
      ]
   }

<table mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="clientId">
            <th mat-header-cell *matHeaderCellDef> {{'ClientId' | uppercase}} </th>
            <td mat-cell *matCellDef="let element" class="data-column">
              {{element.clientID}}
            </td>
          </ng-container>
          <ng-container matColumnDef="fooType">
            <th mat-header-cell *matHeaderCellDef> {{'Foo_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
                {{element.foo_Type}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="footype1">
            <th mat-header-cell *matHeaderCellDef> {{'Foo_Type 1' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[0]}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="servtype2">
            <th mat-header-cell *matHeaderCellDef> {{'Serv_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[1]}}
              </td>
            </div>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

And what is the issue you are having? No data is shown? Any error? — Tiago Silva
– Tiago Silva, Commented Nov 16, 2020 at 11:52
Unhandled error: Cannot read property '0' of undefined and no data is Shown, sorry I forgot to add — Ravel Sbrissa Okada
– Ravel Sbrissa Okada, Commented Nov 16, 2020 at 12:01
Yes, because Foo is not an array, but a property of full chain. — Tiago Silva
– Tiago Silva, Commented Nov 16, 2020 at 12:05

Tiago Silva · Accepted Answer · 2020-11-16 12:03:39Z

2

If it is fixed, always 2 FOO. You can do something like this.

 {{element.FooChain[0].Foo}}

{{element.FooChain[1].Foo}}

However, i'm not sure you can sort and filter by those properties in case you need it. If the number vary, you have to implement ng-for.

 <mat-cell *matCellDef="let element">
        <div>
          <ng-container  *ngFor="let item of element?.FooChain">
            <div >
                <span>{{item.Foo}}</span>
            </div>
          </ng-container>
        </div>
    </mat-cell>

answered Nov 16, 2020 at 12:03

Tiago Silva

2232 silver badges6 bronze badges

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

2 Comments

Ravel Sbrissa Okada Over a year ago

Both solutions worked, but I used the first because in the future I'll have to cover independent scenarios and I think its better make then static

app Over a year ago

I do have same question Tiago... How I can handle multi header scenario with this ? stackoverflow.com/questions/65347251/…

Collectives™ on Stack Overflow

Displaying nested array with mat-table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related