I have received the following response data:
{
"content": [{
"id": 1,
"userName": "v7001",
"status": 1,
"userInfo": {
"id": 1,
"fullName": "Naruto Uzumaki",
"firstName": "Naruto",
"lastName": "Uzumaki",
"address": "Konoha",
"dob": 1509901200000
}
}, {
"id": 2,
"userName": "v7002",
"status": 0,
"userInfo": {
"id": 2,
"fullName": "Hinata Hyuga",
"firstName": "Hinata",
"lastName": "Hyuga",
"address": "Konoha",
"dob": 1509987600000
}
}],
"last": true,
"totalElements": 3,
"totalPages": 1,
"size": 20,
"number": 0,
"first": true,
"sort": null,
"numberOfElements": 3
}
and I am using Angular 4 to display this data. I have created 2 interfaces: User-info
export class UserInfo {
id: number;
fullName: string;
firstName: string;
lastName: string;
address: string;
dob: string
}
and User
import {UserInfo} from './user-info'
export class User {
id: number;
userName: String;
status: String;
userInfo: UserInfo;
}
User service :
getUsers(): Promise<User[]> {
return this.http.get(this.userUrl)
.toPromise()
.then(response => response.json().data as User[])
.catch(this.handleError);
}
I checked in the network tab, and the API successfully retrieved data. In the component:
user: User[];
selectedUser: User;
newUser: User;
data: any={};
constructor(private router: Router,
private userService: UserService) {}
ngOnInit() {
this.userService.getUsers().then(user => this.user = user);
}
and in the html:
<tr role="row" class="odd" *ngFor="let lst of user.content">
<td>{{lst.userInfo.fullName}}</td>
<td>{{lst.userInfo.address}}</td>
</tr>
However, when running the app, an error message is displayed on the console: 'content invalid'. The 'this.user' is undefined. Please advise me on how to resolve this issue.