Fetch pokemon API forEach issue

Question

I need help with the forEach method. I am trying to mess around with the Pokemon API, but I can't run a forEach method without it returning undefined.

When I tried to use forEach instead of the map (I noticed map returned one big array) it still returned undefined.

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;
}

score 1 · Answer 1 · answered Jun 25 '20 at 22:49

So there's a few things going on:

You don't need ".then(res => res.json())" because the response is already in json. You'll also want to extract the data property specifically like:

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

"const arr = [res];" does not turn the object into an array but rather places it into an array. Also, there's a further result layer you need to extra, so you'd want to instead do:

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)
}

Finally you can use the map property to create an array of just the pokemon names.

Thanks for the help, I really thought it would've turned it into an array lol — Allan Rivers, Jun 25 '20 at 23:47

score 1 · Answer 2 · answered Jun 25 '20 at 22:51

The forEach() method calls a function once for each element in an array, in order.

forEach: This iterates over a list and applies some operation with side effects to each list member (example: saving every list item to the database)

map: This iterates over a list, transforms each member of that list, and returns another list of the same size with the transformed members (example: transforming list of strings to uppercase)

from here

Meaning, if you want to do something for every element of the array, foreach is the correct function.

Example of Array.ForEach

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

Now, you are trying to create a new array with all the pokemon names, therefore map is correct - you are mapping the array into a new array.

However, if you want to, say, make an li element in html for every name, then it would be correct to use ForEach.

Example:

fetch('https://pokeapi.co/api/v2/pokemon?limit=151')
  .then(res => res.json())
  .then(data => fetchPokemon(data))
const fetchPokemon = (res) => {
  const firstArr = [res][0].results
  var ul = document.getElementById("pokemon");
  firstArr.forEach(function (entry) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(entry.name));
    ul.appendChild(li);
  });
}

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

Thank you so much for this, this is exactly what I was trying to accomplish! — Allan Rivers, Jun 25 '20 at 23:46
@AllanRivers gladly, please mark this answer as correct if it was helpful. — BatshevaRich, Jun 26 '20 at 07:27

score 0 · Answer 3 · answered Jun 25 '20 at 22:30

0

The forEach method is supposed to return undefined.

answered Jun 25 '20 at 22:30

cybersam

63,203
6
53
76

Fetch pokemon API forEach issue

3 Answers3