Handling an API response object is no different to handling any other JSON object. Just query it in the same way.
Given a response like this:
{
"FarmerDetails": [
// array of objects you want to extract from the response
]
}
You can try several approaches.
- Query the JSON object directly
fetchPeople() {
this.peopleService.fetchPeople().subscribe((res:any)=>{
this.people = res.FarmerDetails;
});
}
- Map in the pipe
fetchPeople() {
this.peopleService.fetchPeople().pipe(
.map(res => res.FarmerDetails)
).subscribe(people => {
this.people = people;
});
}
When the people service emits a value that looks like the JSON above, it applies the transform in the map function before returning it to the subscriber.
- Pluck in the pipe
fetchPeople() {
this.peopleService.fetchPeople().pipe(
.pluck('FarmerDetails')
).subscribe(people => {
this.people = people;
});
}
Similar to map, when the people service emits a value that looks like the JSON above, it returns the named property in the pluck function before returning it to the subscriber.
Approaches 2 and 3 would be preferable, as you can apply these in you service. Assuming that these come from an HTTP request, you can use the pipe after the get:
export class PeopleService {
fetchPeople() {
return this.http.get(url).pipe(
pluck('FarmerDetails')
);
}
}
Also, the "$" suffix on variables is generally used to denote an observable. In your example, you're just storing the value that is emitted by the observable, so it would be confusing to name it people$. I have named it people for this reason.
