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: "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
}

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>

score 0 · Answer 1 · answered May 20 '23 at 06:39

0

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

answered May 20 '23 at 06:39

Syed Rafay

1,405
2
15
19

I still have error in " onGetUsers ", I get instance from usersSerrvice like this `constructor(private usersService: UsersService){ }`, can I use it in this place `this.usersService.getUsers().subscribe(` – Kareem May 20 '23 at 10:41
....................................... – Kareem May 20 '23 at 10:49
@Kareem what is the error – Syed Rafay May 20 '23 at 11:42
in `this.getUsers().subscribe(` 'getUsers' does not exist, because this function in another file named **users.service.ts** – Kareem May 20 '23 at 12:06
Make sure your app.module.ts has this line: `providers: [UsersService]` Then use this serive like: `constructor(private usersService: UsersService){ }` – Syed Rafay May 20 '23 at 12:20
I have added it but still have an error when I write the code like this `onGetUsers(): void{ this.usersService.getUsers().subscribe( ((response: UsersListAPIResponse) => { this.users = new MatTableDataSource(response.list); }) ); }` – Kareem May 20 '23 at 12:30
.................................................... – Kareem May 20 '23 at 12:31

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

1 Answers1

Linked