1
votes

Récupérer l'API Pokemon pour chaque problème

J'ai besoin d'aide avec la méthode forEach. J'essaye de jouer avec l'API Pokemon, mais je ne peux pas exécuter une méthode forEach sans qu'elle ne renvoie undefined.

Quand j'ai essayé d'utiliser forEach au lieu de la carte (j'ai remarqué que la carte retournait un grand tableau), elle retournait toujours non défini.

fetch('https://pokeapi.co/api/v2/pokemon?limit=151')
.then(res => res.json())
.then(data => fetchPokemon(data))



const fetchPokemon = (res) => {
  console.log(res)


// This turns the object api into an array
  const arr = [res];

  console.log(arr)


// This creates a variable to map correctly
  const firstArr = arr[0].results


// This creates a new array with pokemon name
  const array = firstArr.map(pokemon => pokemon.name)
  console.log(array);


  const html =
  `
    <div>${array}</div>
  `


  const pokemon = document.querySelector('.pokemon');
  pokemon.innerHTML = html;
}

javascript api

0 commentaires

3 Réponses :

0
votes

La méthode forEach est supposé renvoyer undefined .

0 commentaires

1
votes

Il se passe donc plusieurs choses:

Vous n'avez pas besoin de ".then (res => res.json ())" car la réponse est déjà en json. Vous voudrez également extraire la propriété de données spécifiquement comme:

const fetchPokemon = (res) => {
    //extract the results property into its own variable
    const {results} = res; 
    //create an array of just object.name properties
    const names = results.map( pokemon => pokemon.name)
}

"const arr = [res];" ne transforme pas l'objet en tableau mais le place plutôt dans un tableau. De plus, il y a une couche de résultats supplémentaire que vous devez ajouter, donc vous voudrez plutôt faire:

axios('https://pokeapi.co/api/v2/pokemon?limit=151')
  .then(({data}) => fetchPokemon(data))

Enfin, vous pouvez utiliser la propriété map pour créer un tableau contenant uniquement les noms de Pokémon.

1 commentaires

Merci pour l'aide, j'ai vraiment pensé que ça l'aurait transformé en un tableau lol

1
votes

La méthode forEach () appelle une fonction une fois pour chaque élément d'un tableau, dans l'ordre.

forEach : Ceci itère sur une liste et applique une opération avec effets secondaires sur chaque membre de la liste (exemple: enregistrement de chaque élément de la liste la base de données)

map : Cela itère sur une liste, transforme chaque membre de cette liste, et renvoie une autre liste de même taille avec les membres transformés (exemple: transformation de la liste de chaînes en majuscules)

de ici

Cela signifie que si vous voulez faire quelque chose pour chaque élément du tableau, foreach est la fonction correcte.

Exemple de Array.ForEach

<ul id="pokemon"></ul>

2 commentaires

Merci beaucoup pour cela, c'est exactement ce que j'essayais d'accomplir!

@AllanRivers avec plaisir, veuillez marquer cette réponse comme correcte si elle vous a été utile.