how to get data from nested json in angular material tables ? - ANGULAR

Question

im trying to get data from localhost, but when it comes on diffrent structure i can't understand how to get those datas on data user. any helps?

and this is how im trying to approach but failed and get ERROR Error: Could not find column with id "_id".

Json File

{
  "message": "Handling GET requests to User",
  "dataUser": [
    {
      "CountLike": 15,
      "CountShare": 26,
      "id": "5edb6d50d77987442cf1d7ed",
      "Name": "Andy",
      "Point": 40
    }
  ]
}

and this is my servise.ts files

getUsers() {
    return this.http.get('http://localhost:3000/surveys');
}

this is my html files

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="dataUser _id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let element">
      {{ element.dataUser._id }}
    </td>
  </ng-container>

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

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

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

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    (click)="selection.toggle(row)"
  ></tr>
</mat-table>

this is my component.ts files ignore how im put name on the interface xD

export interface Userstructure {
  _id: string;
  CountLike: string;
  CountShare: string;
  Point: string;
}
export interface UserMain {
  message: string;
  dataUser: Userstructure[];
}

@component
displayedColumns: string[] = [
    '_id',
    'CountLike',
    'CountShare',
    'Point',
  ];
users: Userstructure[];
dataSource;
user;
selection = new SelectionModel<Userstructure>(true, []);
ngOnInit(): void {
console.log(this.users);//this return 'undefined' on console.
this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource(users);
    });
  }

Answer 1

First of all, DataSource expects an array of objects, and you are providing it with an object (based on the example Json you provided). So, you want to use only the dataUser part of the response.

this.surveyService.getUsers().subscribe((users: Userstructure[]) => {
  this.users = users.dataUser;
  this.dataSource = new MatTableDataSource(users.dataUser);
});

}

Second thing - the displayedColumns names have to match the names of the columns in the matColumnDef . Also, you don't want to add any spaces into the column names - those are translated into ids, and css classes as well, so you probably want to keep them short and simple. Just remove the dataUser part from the column names (note - also remove the space). This should fix your initial problem - haven't checked the rest of the code, but this should get you on track.