angular api datatable : no data found - json

Question

I'm trying to make a table with this API:
https://run.mocky.io/v3/70e5b0ad-7112-41c5-853e-b382a39e65b7/people
the html structure of my table appears but not the data of my API and I have no error in the console
Do you have a solution ?
here is the structure of my rest component (code of my table):
people.ts
export class people {
id: string;
firstname: string;
lastname: string;
email: string;
mobile: string;
city: string;
country: string;
constructor(id,firstName,lastName,email,mobile,city,country){
this.id=id;
this.firstname=firstName;
this.lastname=lastName;
this.email=email;
this.mobile=mobile;
this.city=city;
this.country=country;
}
}
rest.component.html
<h1>Employee Dashboard</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr *ngFor= "let user of users">
<td>{{people.id}}</td>
<td>{{people.firstname}}</td>
<td>{{people.lastname}}</td>
<td>{{people.email}}</td>
<td>{{people.address}}</td>
<td>{{people.city}}</td>
<td>{{people.country}}</td>
</tr>
</tbody>
</table>
rest.component.spec.ts
import { TestBed, async } from '#angular/core/testing';
import { RouterTestingModule } from '#angular/router/testing';
import { AppComponent } from './rest.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'project'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('project');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to project!');
});
});
rest.component.ts
import { Component, OnInit } from '#angular/core';
import { people } from './people';
import { RestService } from './rest.service';
#Component({
selector: 'app-root',
templateUrl: './rest.component.html',
styleUrls: ['./rest.component.css']
})
export class RestComponent implements OnInit {
people: people[] = [];
constructor(public rs: RestService){
}
ngOnInit():void {
this.rs.getUsers().subscribe((response) => {
this.people=response;
})
}
title = 'project';
}
rest.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { people } from './people'
#Injectable({
providedIn: 'root'
})
export class RestService {
constructor(private http:HttpClient){}
url:string= "https://run.mocky.io/v3/70e5b0ad-7112-41c5-853e-b382a39e65b7/people";
getUsers(){
return this.http.get<people[]>(this.url);
}
}

Answer 1

The actual array of People objects is under a property named "people" in the API response. So, modify the service code:
getUsers(){
return this.http.get<any>(this.url).pipe(
map(response) => {
return response['people'];
})
);
}

Answer 2

The code you will need to change will be in two files
rest.component.html
Replace this
<tr *ngFor= "let user of users">
<td>{{people.id}}</td>
<td>{{people.firstname}}</td>
<td>{{people.lastname}}</td>
<td>{{people.email}}</td>
<td>{{people.address}}</td>
<td>{{people.city}}</td>
<td>{{people.country}}</td>
</tr>
with this
<tr *ngFor= "let user of users">
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td>{{user.address}}</td>
<td>{{user.city}}</td>
<td>{{user.country}}</td>
</tr>
In rest.component.ts
Replace
ngOnInit():void {
this.rs.getUsers().subscribe((response) => {
this.people=response;
})
with this
ngOnInit():void {
this.rs.getUsers().subscribe((response) => {
this.users=response.people;
})

Answer 3

It should be user.id not people.id
<tr *ngFor= "let user of users">
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td>{{user.address}}</td>
<td>{{user.city}}</td>
<td>{{user.country}}</td>
</tr>

Answer 4

The problem with code is you saving data in people and in frontend you are using user which is not defined.
<tbody>
<tr *ngFor= "let p of people">
<td>{{p.id}}</td>
<td>{{p.firstname}}</td>
<td>{{p.lastname}}</td>
<td>{{p.email}}</td>
<td>{{p.address}}</td>
<td>{{p.city}}</td>
<td>{{p.country}}</td>
</tr>
</tbody>