Receiving the correct array from the api, but the values ​do not appear in the mat table

user_15685916 0
Viewed 50

I decided to learn angular a few weeks ago, but I have difficulties. I can't populate a table with values ​​received from an API using MatTable . I am receiving the correct values ​​from the api but these values ​​do not appear in the table, no errors while compiling. I've tried many solutions but none of them worked. Please help

HTML:


<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="animaltype">
    <th mat-header-cell *matHeaderCellDef> AnimalType </th>
    <td mat-cell *matCellDef="let element"> {{element.animaltype}} </td>
  </ng-container>
  <ng-container matColumnDef="race">
    <th mat-header-cell *matHeaderCellDef> Race </th>
    <td mat-cell *matCellDef="let element"> {{element.race}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Typescript:

    import { AfterViewInit, Component, ViewChild, OnInit } from '@angular/core';
    import { MatTableDataSource } from '@angular/material/table';
    import { User } from 'src/app/models/user.model';
    import { Adoption } from 'src/app/models/adoption.model';
    import { AccountService } from '../services/account.service';

    @Component({
    selector: 'app-myadoptions',
    templateUrl: './myadoptions.component.html',
    styleUrls: ['./myadoptions.component.css']
    })

     export class MyadoptionsComponent implements OnInit {
      allAdoption: Adoption[];
      dataSource: MatTableDataSource<Adoption>;
      displayedColumns: string[] = ['ID', 'name', 'animaltype', 'race'];
      user: User;
      string: string;
      payload;

      constructor(private accountService: AccountService) {
      }

      ngOnInit() {
        this.adoptions();
      }

      public adoptions() {
      let resp = this.accountService.getAdoptions(this.getUserId());
      resp.subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        console.log(this.dataSource.data);
      });
      }

      getUserId() {
        this.string = localStorage.getItem('user');
        this.user = (JSON.parse(this.string));
           if (this.user.token) {
            this.payload = this.user.token.split(".")[1];
            this.payload = window.atob(this.payload);
            const userString = JSON.parse(this.payload);
            return parseInt(userString.UserID);
      }
     }

     }

Model:

    export class Adoption {
    id: number;
    name: string;
    animaltype: string;
    race: string;
    UserID: number; 
    text: string;
    adopted: boolean; 
     }

Console log: Console.log

Table: table

angular typescript json
1 Answers

I suspect that the response from getAdoptions has the data you are looking for in a nested property named data, but what you are loading into the MatTable is the outer response object itself.

i.e., you are doing:

let resp = this.accountService.getAdoptions(this.getUserId());
      resp.subscribe(data => {
        this.dataSource = new MatTableDataSource(data);

which looks reasonable, but when I look at your console output for this.dataSource.data, I see that the Adoption records are in a property named data. i.e., the original shape of the returned information is probably:

getAdoptionsResponse: {
  data: Adoption[];
}

If this is the case, you need to update your code to do:

let resp = this.accountService.getAdoptions(this.getUserId());
      resp.subscribe(response => {
        this.dataSource = new MatTableDataSource(response.data);

in order to load the data correctly.

You should be able to verify this (or refute it) by printing out the value you get from the getAdoptions subscription.

user_9254780
Related