Encountering issues displaying data from my local express.js REST API, organized as follows:
people: [{ surname: 'testsurname', name: 'testname', email:
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681c0d1b1c05090104280f05090104460b07">[email protected]</a>', status: 1, activity: 'Office' }
An excerpt from my people service where data retrieval is defined:
export interface People {
surname: String;
name: String;
email: String;
status: Boolean;
activity: String;
}
@Injectable()
export class PeopleService {
private _peopleURL = "http://localhost:8080/api/people";
constructor(private http: HttpClient) {
console.log('init PS')
}
getPeople(): Observable<People[]> {
return this.http
.get(this._peopleURL)
.map((response: Response) => {
return <People[]>response.json();
})
}
}
This section showcases the code in my PeopleComponent.ts file:
export class PeopleComponent implements OnInit {
_peopleArray: People[];
constructor(private ps: PeopleService)
{ }
getPeople(): void {
this.ps.getPeople()
.subscribe(
resultArray => this._peopleArray = resultArray,
error => console.log("Error :: " + error)
)
}
ngOnInit(): void {
this.getPeople();
}
The next step aims to display the data (specifically the name) in the 'People' component HTML page using:
<div> {{people.name}} </div>
Nevertheless, upon starting the application, an error occurs stating
'TypeError: Cannot read property 'name' of undefined at Object.eval [as updateRenderer]
Could someone shed light on what I may have overlooked and provide guidance on showcasing the data properly?