0
734
VisualizaçõesJavascript API Fetch make a filter PokeApi
I´m studying Javascript. And for that I am making a Pokémon Game based on the PokéAPI
To make it simple, I want to retrieve - filter - Pokémons with types Fire, Water & Grass.
I understand I should go to data > types > (look in the slots 1 & 2) > search for grass, fire & water.
So this is my code, so far, and I was thinking if I could do it BEFORE retrieving the data to the API. Otherwise I´ll have to retrieve EVERY Pokémon and then filter them.
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150'
try {
fetch(baseUrl)
.then(response => {
const responseJson = response.json()
return responseJson
})
.then(async data => {
const pokemons = data.results
for (const pokemon of pokemons) {
pokemon.data = await fetch(pokemon.url).then(res => res.json())
}
console.log(pokemons)
})
.catch(error => {
console.error(error)
})
} catch (error) {
console.error(error)
}2 Respostas
Responde à pergunta0
If you do not normalize the API data you have to filter using this list. But when you get the pokemon list you can normalize the list to a more friendly structure to your app.
function normalizeList (item = {}) {
const { name, data } = item
// Define your normalized data here
return {
name,
types: data.types
}
}
If you need to transform/parse or whatever I recomend you to create a PokemonModel and create Pokemon Class instances:
class PokemonModel {
constructor(data = {}) {
this.name = data.name
this.types = this._getTypes(data.types)
}
_getTypes(types = []) {
return types.map((type) => {
return {
name: type.name
}
})
}
}
Your code with PokemonModel:
class PokemonModel {
constructor(data = {}) {
this.name = data.name
this.types = this._getTypes(data.types)
}
_getTypes(types = []) {
return types.map((type) => {
return {
name: type.name
}
})
}
}
const baseUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150'
const pokemonList = []
try {
fetch(baseUrl)
.then(response => {
const responseJson = response.json()
return responseJson
})
.then(async data => {
const pokemons = data.results
for (const pokemon of pokemons) {
pokemon.data = await fetch(pokemon.url).then(res => res.json())
pokemonList.push(new PokemonModel(pokemon.data))
}
console.log(pokemonList)
})
.catch(error => {
console.error(error)
})
} catch (error) {
console.error(error)
}