1. 20
    Augment React Resource JSON with Custom Properties
    2m 19s

Augment React Resource JSON with Custom Properties

Share this video with your friends

Send Tweet

You're never stuck with the data you get from the server.
The Pokeapi doesn't have an id property on Pokemon but we can transform our response to include exactly what we need.

With a little destructuring assignment and object spread we can augment our API with helpful properties

Mihail Gumennii
Mihail Gumennii
~ 5 years ago
export function fetchPokemonCollection() {
  return fetch(`https://pokeapi.co/api/v2/pokemon`)
    .then(res => res.json())
    .then(res => ({..res, results: res.results.map(pokemon => ({ 
      ...pokemon, 
      id: pokemon.url.split("/")[6]
      }))
    }))
    .then(sleep(1000));
}

I think it's typo in ({..res}) it should have 3 dots { ... res }

Lucas Minter
Lucas Minter
~ 5 years ago

Thanks for that @Mihail! That typo is fixed now.