Can’t iterate over my API generated array using the forEach() method Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Can’t iterate over my API generated array using the forEach() method without wasting too much if your time.

The question is published on by Tutorial Guruji team.

After troubleshooting with console.log/debugger it seems like I cannot iterate over my API generated array at the forEach method call in the function addListItem.

However I can see the pokemonNameList array being populated in the forEach iteration in the loadList function.

What am I doing wrong?

const apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=15';
const pokemonNameList = [];

function getAll() {
    return pokemonNameList;
  }

function add(pokemon) {
    if (typeof pokemon === 'object') {
      pokemonNameList.push(pokemon);
    }
  }

function loadList() {
    return fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        data.results.forEach((item) => {
          fetch(item.url)
            .then((response) => response.json())
            .then((inneritem) => {
              const pokemon = {
                name: inneritem.name,
                height: inneritem.height,
                weight: inneritem.weight
              };
              add(pokemon);
              console.log(pokemonNameList);// I can see the array here
            });
        });
      })
      .then(() => {
        console.log(pokemonNameList);
      })
      .catch((e) => {
        console.error(e);
      });
  }

function addListItem(pokemon) {
    console.log('I cannot see this console log');//This does not show up
    const card = document.createElement('li');
    const cardbody = document.createElement('div');
    const name = document.createElement('h1');

    card.classList.add('card');
    cardbody.classList.add('card-body');
    name.classList.add('card-title');
    name.innerText = pokemon.name;

    cardbody.appendChild(name);
    card.appendChild(cardbody);
    pokemonList.appendChild(card);
  }

loadList()
  .then(() => {
    getAll().forEach((item) => {
      console.log('Hello from inside the forEach');//I cannot see this
      addListItem(item);
    });
  })
  .catch((e) => {
    console.error(e);
  });

Answer

The problem is that you are not waiting for the inner fetch(item.url)s so when you call getAll no item has been pushed yet.

you can do that by changing forEach to map, returning the promise and adding a promise.all… something like this:

function loadList() {
    return fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        return Promise.all(data.results.map((item) => {
          return fetch(item.url)
  ...
We are here to answer your question about Can’t iterate over my API generated array using the forEach() method - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji