How can I view nested rest api in material table in angular

Question

I have nested rest api from URL, How can I view nested rest api in material table in angular ? I have tried to create this code but ther is no data view in the table .

How can I resolve this problem ? How can I resolve this problem ?

- This is my code :

• Json data from URL:

{
list: [
       {
        id: 1,
        login: "[email protected]",
        first_name: "AK",
        phone: "967777777777",
       },
       {
        id: 2,
        login: "[email protected]",
        first_name: "QR",
        phone: "967777777777",
       },
       {
        id: 3,
        login: "[email protected]",
        first_name: "JM",
        phone: "967777777777",
       }
      ],
count: 3,
success: true
}

• Interfaces:

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
}

• Service:

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)),
    );
  }

• TypeScript Code:

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);
      })
    );
  }

}

• HTML Code:

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

Answer 1

The datasource is expected to be an array, which in your case is response.list not response.

Modify your code so that datasource gets response.list instead:

// users: any[] = []; // this is wrong
users: MatTableDataSource<List> = new MatTableDataSource();

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

Do these changes and your code should work.

By the way I would change the name of interfaces so that it is easier to work. You could rename Users to UsersListAPIResponse, List to User.

Then your code would become:

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

export interface UsersListAPIResponse {
  list: User[]
  count: number
  success: boolean
}


users: MatTableDataSource<User> = new MatTableDataSource();

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