CODEWITHSUNDEEP
javascripttypescriptrxjs
KingKongFrog
KingKongFrog

Reputation: 14429

How to return observable with RxJS in proper format with additional separate paging data

I have an API that returns the following:

{
  'data' : {
     players: [
        {id: 1, name: 'harry'},
        {id: 2, name: 'barry'} ...
     ],
  },
  'paging': {
    current: 1,
    totalPages: 10,
  } 
}

How do I return this correctly with players in the object and also paging info so they are separate keys?

getPlayers(type: string): Observable<Player[]> {
  return this.get(myApiURL).pipe(
    map(result => {
      'players': result.data.map(player => {
        player._dead = !!player.deathDate;
        return player;
      }),
    }
  );
);

Upvotes: 5

Views: 140

Answers (1)

Jonathan Stellwag
Jonathan Stellwag

Reputation: 4277

Interfaces

interface Player {
  id;
  name;
}

interface Paging {
  current;
  totalPages
}

interface HttpPlayer  {
  data: {
    players: Player[]
  };
  paging: Paging;
}

interface UiPlayer {
  id;
  name;
  current;
  totalPages;
}

Mapping to merge players and paging (regarding your question)

const mergePlayersWithPaging = (data: HttpPlayer): UiPlayer [] => data.players.map(player => Object.assign({}, player, data.paging))

Mapping to separate players and paging (regarding your comment)

const mapHttpPlayerToPlayers = (httpPlayer: HttpPlayer): Player[] => httpPlayer.data.players;

const mapHttpPlayerToPaging = (httpPlayer: HttpPlayer):

Use the mapping (merge)

getPlayers(type: string): Observable<Player[]> {
 return this.get(myApiURL).pipe(
   map(mergePlayersWithPaging)
 )
}

Use the mapping (separate)

getPlayers(type: string): Observable<Player[]> {
 return this.get(myApiURL).pipe(
   map(mapHttpPlayerToPlayers)
 )
}

getPaging(type: string): Observable<Player[]> {
 return this.get(myApiURL).pipe(
   map(mapHttpPlayerToPaging)
 )
}

Upvotes: 3

Related Questions