How to map json response to model - json

Question

games json response
I originally had this piece of code
this.gameService.getAll()
.pipe(map(data => data['hydra:member']))
.subscribe( (games: Game[]) => this.games = games );
but if I want to retrieve more properties from the json response someone told me to do this
this.gameService.getAll()
.pipe(map(data => data['hydra:member']))
.subscribe(result => [result["hydra:member"], result['hydra:totalItems']]);
however how do you add the following to the above code:
(games: Game[]) => this.games = games );
and map totalItems to a variable.

Answer 1

with this line: pipe(map(data => data['hydra:member'])), it will only contain data from hydra:member.
Is this.games contain all data from API or the hydra:member?
try this:
this.gameService.getAll().subscribe((games: Game[]) => {
this.games = games;
this.totalItems = games['hydra:totalItems']
});

Answer 2

I would try defining my payload (the object I plan to return from the call) and fill that object out using type safety to help me out.
Something like this.
// you can just add more properties later if you like
export interface IGamesGetAllResponseObject {
games: any[]; // or better yet define the game object so it isn't any
totalGames: number;
}
// now define a function that will map the response to the intended object
export mapGamesGetAllToReponse(data): IGamesGetAllResponseObject {
return {
games: data['hydra:member'],
totalGames: data['hydra:totalItems'],
};
}
...
//then use it like this
this.gameService.getAll()
.pipe(map(mapGamesGetAllToReponse))
.subscribe( (result: IGamesGetAllResponseObject) => {
this.games = result.games;
this.totalGames = result.totalGames;
});
I haven't checked all my syntax there 100% but it should be very close to a solution for you.
I would also consider doing all that mapping in the service itself, rather than where you are subscribing. By doing that, you can contain the logic about what data you want and how to map it to the service, and the component just requests what it wants.

Answer 3

you can get multi property from the json response by call same property so that the above code will be :
this.gameService.getAll().pipe(map(result =>
{
this.games = result["hydra:member"] ;
this.totalItems = result['hydra:totalItems'];
}
)).subscribe();
and then call 'this.games' and 'this.totalItems' inline subscribe block.