How to Unwrap Json data in angular? - json

Question

I have a Json data in this format
I want to parse this data in angular typescript when I am calling the rest API. How to do it.
Here this part is my java class object which I want to convert to my model class array.
"gameId": 66,
"kashScore": 0,
"samScore": 1,
"wonBy": "Sam",
"createUserId": 0,
"lastModifiedUserId": 0,
"creationDate": "2020-04-20T14:05:44.263+0000",
"lastModifiedDateTime": "2020-04-20T14:05:44.264+0000",
"sessionId": 1000,
"count": null
My model class
And this information is for tracking pagination.
I tried something like this, but it gives error as:-

Answer 1

Your response is just an array. The data that represents Fifa[] is the first item in the response array.
The HttpClient won't magically convert it for you. If you want to return Fifa[] from your service, then you need to map your response to that type.
return this.http.get<any[]>(fifaUrl).pipe(
map((response: any[]) => response[0])
);
EDIT
You have stated that you want to return all information from the response. In that case you should return an object that implements GetResponse from service function (and probably think about a more suitable name).
fetchAllGamesRecordPaginate(
pageNumber: number, pageSize: number
): Observable<GetResponse> {
const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize};
return this.httpClient.get(fifaUrl).pipe(
map((response: any[]) => {
const pagination = response[1];
return {
fifa: response[0],
totalRecord: pagination.totalRecord,
pageSize: pagination.pageSize,
pageNumber: pagination.pageNumber,
totalPages: pagination.totalPages
};
})
);
}
Here I am mapping the response array to an object that implements GetResponse.

Answer 2

If you want the method to just return an Observable<Fifa[]> you should use a map operator on your Observable:
return this.httpClient.get<GetResponse>(fifaUrl).pipe(
map((response) => response.fifa)
);

Answer 3

update the return type to Observable<GetResponse> then you need to map the respond to GetResponse structure
fetchAllGamesRecordPaginate(pageNumber:number,pageSize: number):Observable<GetResponse>{
const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize};
return this.httpClient.get(fifaUrl)
.pipe(([fifa,paginationInfo]) => (
{
fifa ,
...paginationInfo
}
)
);
}
the api return an array with two items the first is the fifa[] and the
second is an object with pagination information