1

Olá, estou encontrando problemas em popular uma mat-table com um Json que contém subitens.

Minha API retorna:

{"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}]}]}

Para um retorno simples, ok, mas e quando tenho uma array em um objeto? No caso eu preciso ler os dados de Samples[]

Via console já verifiquei que o retorno do Json está ok, mas a tabela não carrega os dados.

<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>
  

3
  • Você tem dois objetos em um arquivo json... Tem dois objeto com nome data,muito confuso. Commented 14/08/2019 às 14:03
  • No Json é só um objeto Data, acabe de conferir aqui. Commented 14/08/2019 às 14:15
  • Desculpe o editor JSON duplicou os dados. Commented 14/08/2019 às 14:50

1 Resposta 1

2

Não está complexo seu Json, como está trabalhando com Angular, Json são muito comuns então tem que conhece-los bem para acessar suas propriedades, pode ver o exemplo funcionando com os seus dados aqui. No seu caso vc tem um retorno de um objeto { } e dentro deste objeto tem a propriedade Data que é um array [ ] de objetos, que por sua vez tem a propriedade Samples que também é um array de objetos que é onde estão as informações que realmente precisa para preencher a mat-table:

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

Ou seja vc só precisa do conteúdo de Samples, que pode ser acessado assim:

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

Que vai gerar o array contendo os objetos:

[
  {"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}
]

Aí é só configurar as propriedades da mat-table:

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

E no Html inserir os dados corretamente:

<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>
3
  • Opa! muito obrigado!!! Testei e funcionou, agora tenho que implementar junto com um token gerado anteriormente. Commented 14/08/2019 às 19:23
  • Se a resposta lhe serviu de alguma maneira, poderia considerá-la como aceita, para que a mesma não fique como aberta no site?
    – LeAndrade
    Commented 15/08/2019 às 14:57
  • Desculpe, me esqueci. Commented 15/08/2019 às 17:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .