Angular 7 - mat-table with complex Json

Question

Hi, I’m encountering problems in popular a mat-table with a Json that contains subitens.

My API returns:

{"ErrorCode":0,"ErrorMessage":null,"Data":[{"TagName":"0153_DLD_LD_CCO.02LT05N.F_CV","ErrorCode":0,"DataType":"Float","Samples":[{"TimeStamp":"2019-04-22T22:10:00.000Z","Value":"3.982000113","Quality":3},{"TimeStamp":"2019-04-22T22:20:00.000Z","Value":"3.836999893","Quality":3},{"TimeStamp":"2019-04-22T22:30:00.000Z","Value":"3.691999912","Quality":3},{"TimeStamp":"2019-04-22T22:40:00.000Z","Value":"3.542500019","Quality":3},{"TimeStamp":"2019-04-22T22:50:00.000Z","Value":"3.392999887","Quality":3},{"TimeStamp":"2019-04-22T23:00:00.000Z","Value":"3.237999916","Quality":3},{"TimeStamp":"2019-04-22T23:10:00.000Z","Value":"3.082999945","Quality":3},{"TimeStamp":"2019-04-22T23:20:00.000Z","Value":"2.929500103","Quality":3},{"TimeStamp":"2019-04-22T23:30:00.000Z","Value":"2.776000023","Quality":3},{"TimeStamp":"2019-04-22T23:40:00.000Z","Value":"2.63049984","Quality":3}]}]}

For a simple return, okay, but when do I have an array on an object? In case I need to read the Samples data[]

Via console I have already checked that the return of Json is ok, but the table does not load the data.

<table mat-table [dataSource]="dadosLeitura" class="mat-elevation-z8">
    <ng-container matColumnDef="item">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let dadosLeitura"> {{dadosLeitura.Data.Samples.Value}} 
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
  

Answer 1

It’s not your complex Json, as you are working with Angular, Json are very common so you have to know them well to access their properties, you can see the example working with your data here. In your case you get a return of a objeto { } and within this object has the property Date which is a array [ ] of objects, which in turn has the property Samples which is also an array of objects that is where the information really needs to fill in the mat-table:

const RETORNO_API = {"ErrorCode":0,"ErrorMessage":null,"Data"[
  {"TagName":"0153_DLD_LD_CCO.02LT05N.F_CV", "ErrorCode":0,"DataType":"Float","Samples":[{
  ...

So you just need the content of Samples, that can be accessed this way:

const DADOS = RETORNO_API.Data[0].Samples;

That will generate the array containing the objects:

[
  {"TimeStamp":"2019-04-22T22:10:00.000Z","Value":"3.982000113","Quality":3},     
  {"TimeStamp":"2019-04-22T22:20:00.000Z","Value":"3.836999893","Quality":3},
  {"TimeStamp":"2019-04-22T22:30:00.000Z","Value":"3.691999912","Quality":3}, 
  {"TimeStamp":"2019-04-22T22:40:00.000Z","Value":"3.542500019","Quality":3}, 
  {"TimeStamp":"2019-04-22T22:50:00.000Z","Value":"3.392999887","Quality":3}, 
  {"TimeStamp":"2019-04-22T23:00:00.000Z","Value":"3.237999916","Quality":3}, 
  {"TimeStamp":"2019-04-22T23:10:00.000Z","Value":"3.082999945","Quality":3}, 
  {"TimeStamp":"2019-04-22T23:20:00.000Z","Value":"2.929500103","Quality":3}, 
  {"TimeStamp":"2019-04-22T23:30:00.000Z","Value":"2.776000023","Quality":3}, 
  {"TimeStamp":"2019-04-22T23:40:00.000Z","Value":"2.63049984","Quality":3}
]

Then just configure the properties of the mat-table:

displayedColumns: string[] = ['TimeStamp', 'Value', 'Quality'];
dataSource = DADOS;

And in Html insert the data correctly:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- TimeStamp Column -->
  <ng-container matColumnDef="TimeStamp">
    <th mat-header-cell *matHeaderCellDef> TimeStamp </th>
    <td mat-cell *matCellDef="let element"> {{element.TimeStamp}} </td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="Value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{element.Value}} </td>
  </ng-container>

  <!-- Quality Column -->
  <ng-container matColumnDef="Quality">
    <th mat-header-cell *matHeaderCellDef> Quality </th>
    <td mat-cell *matCellDef="let element"> {{element.Quality}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>