How to convert JSON object to an Typescript array in an api - arrays

Question

I'm having an API request which returns the following:
{
"FarmerDetails": [
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
}
]
}
I need to show the title when I click the button and when the button clicks this "fetchPeople()" function gets call.
fetchPeople() {
this.peopleService.fetchPeople().subscribe((res:any)=>{
this.people$ = res;
});
}
How can I convert my Object to Array in typescript and show particular or all values.

Answer 1

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.

Answer 2

When you get response from api, it will return in string format. So, you require to convert it to json format. Parse it to json:
this.people=JSON.parse(res);