Angular Material Table - How to display the nested data

Question

I have a REST API response from the URL like this:

{
  "list": [
    {
      "id": 1,
      "login": "test_1@yt.com",
      "first_name": "AK",
      "phone": "967777777777"
    },
    {
      "id": 2,
      "login": "test_2@yt.com",
      "first_name": "QR",
      "phone": "967777777777"
    },
    {
      "id": 3,
      "login": "test_3@yt.com",
      "first_name": "JM",
      "phone": "967777777777"
    }
  ],
  "count": 3,
  "success": true
}

and I created 2 interfaces for this API like this:

import { List } from "./list"

export interface Users {
    list: List[]
    count: number
    success: boolean
}

export interface List {
    id: number
    first_name: string
    login: string
    phone: string
}

and I created a service to get data from the API URL like this:

getUsers(): Observable<Users[]>{
    //myHeader = myHeader.set('id', '123456');
    return this.http.get<Users[]>(`https://api.users.com/user/list`).pipe(
      tap(users => console.log(users)),
    );
}

and I called this service in my component.ts like this:

export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'first_name', 'login', 'phone'];
  users: any[] = [];

  constructor(private usersService: UsersService){ }

  ngOnInit(): void {
    this.onGetUsers();
  }

  onGetUsers(): void{
    this.usersService.getUsers().subscribe(
      (response => {
        this.users = new MatTableDataSource<Users>(response);
      })
    );
  }
}

and view this data in the material table like this:

<table mat-table [dataSource]="users" class="mat-elevation-z8">
  
     Position Column 
    <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="first_name">
      <th mat-header-cell *matHeaderCellDef> first_name </th>
      <td mat-cell *matCellDef="let element"> {{element.first_name}} </td>
    </ng-container>
  
    <ng-container matColumnDef="login">
      <th mat-header-cell *matHeaderCellDef> login </th>
      <td mat-cell *matCellDef="let element"> {{element.login}} </td>
    </ng-container>
  
    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef> phone </th>
      <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

But there is no data shown in the table. How can I resolve this problem?

It seems you are asking this question for multiple times in your previous posts: [How can I view nested rest api in material table in angular](https://stackoverflow.com/questions/76291058/how-can-i-view-nested-rest-api-in-material-table-in-angular), [How can I get data from nested rest api and fill thim in angular material table](https://stackoverflow.com/q/76267329/8017690) — Yong Shun, May 23 '23 at 00:34

score 1 · Accepted Answer · answered May 23 '23 at 01:33

Your JSON response is a Users object but not Users array.

Modify the getUsers from the service to return an Observable of Observable<Users> type.

getUsers(): Observable<Users> {
  //myHeader = myHeader.set('id', '123456');
  return this.http
    .get<Users>(`https://yapi.yementrack.com.ye/panel/user/list`)
    .pipe(tap((users) => console.log(users)));
}

Modify the users variable as MatTableDataSource<List> type. (Would recommend renaming the variable as userDatSource but it is optional)
You should assign the response.list value to users data source.

users!: MatTableDataSource<List>;

onGetUsers(): void {
  this.usersService.getUsers().subscribe((response) => {
    this.users = new MatTableDataSource<List>(response.list);
  });
}

Demo @ StackBlitz

Angular Material Table - How to display the nested data

1 Answers1