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, Nov 16 '20 at 11:52
Unhandled error: Cannot read property '0' of undefined and no data is Shown, sorry I forgot to add — Ravel Sbrissa Okada, Nov 16 '20 at 12:01
Yes, because Foo is not an array, but a property of full chain. — Tiago Silva, Nov 16 '20 at 12:05

score 2 · Accepted Answer · answered Nov 16 '20 at 12:03

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 '20 at 12:03

Tiago Silva

223
2
6

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 – Ravel Sbrissa Okada Nov 16 '20 at 14:22
I do have same question Tiago... How I can handle multi header scenario with this ? https://stackoverflow.com/questions/65347251/how-to-show-split-header-in-the-material-table-having-nested-group-of-data-in-an – app Dec 18 '20 at 13:26

Displaying nested array with mat-table

1 Answers1