Hi there, I'm just starting out with Angular and I've run into a bit of a problem. An error keeps popping up saying that the property 'data' can't be found in the API object I'm trying to retrieve data from. I'm fetching data from a simple API and attempting to display it on my page. Here's the code snippet:
export class ArticlesComponent implements OnInit {
users: Object;
constructor(private data: DataService) { }
ngOnInit(): void {
this.data.getUsers().subscribe(data=>{
this.users=data;
console.log(this.users);
});
}
}
This is how the Template looks:
<ul *ngIf="users">
<li *ngFor="let user of users.data">
<img [src]="user.avatar">
<p>{{user.first_name}} {{user.last_name}}</p>
</li>
</ul>
I've been stuck on this issue for quite some time now. When I check the console log, I can see that there is indeed a 'data' property containing all the user information that I want to display. However, it keeps telling me that 'data' doesn't exist. Here's the link to the API: . Any help would be greatly appreciated.
Here's the function in the service class:
export class DataService {
constructor(private http: HttpClient) { }
getUsers(){
return this.http.get('https://reqres.in/api/users?page=2');
}
}