I recently received a REST API response from the following URL:
{
"list": [
{
"id": 1,
"login": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c08190f08234d3c0508521f1311">[email protected]</a>",
"first_name": "AK",
"phone": "967777777777"
},
{
"id": 2,
"login": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e094859394bfd2a09994ce838f8d">[email protected]</a>",
"first_name": "QR",
"phone": "967777777777"
},
{
"id": 3,
"login": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd89988e89a2cebd8489d39e9290">[email protected]</a>",
"first_name": "JM",
"phone": "967777777777"
}
],
"count": 3,
"success": true
}
Subsequently, I designed and implemented 2 interfaces to handle this API response:
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
}
In addition, a custom service was created to retrieve data from the API URL:
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)),
);
}
Furthermore, I invoked this service within my component.ts file in the following manner:
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);
})
);
}
}
The retrieved data is then presented in a material table as shown below:
<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>
Unfortunately, no data appears in the table. How can I troubleshoot and resolve this issue?