无法使用 forEach() 方法遍历我的 API 生成的数组

Question

在使用控制台进行故障排除后。log/debugger 似乎我无法在函数 addListItem 的 forEach 方法调用中迭代 API 生成的数组。

但是我可以看到在 loadList 函数的 forEach 迭代中填充了 pokemonNameList 数组。

我做错了什么？

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 1

我创建了直到你提到错误的地方的所有函数

const pokemonNameList = []; // Pokemon Array
const apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=15'; // API URL
// To prevent duplicates, in case of calling the loadList function multiple times, i'm passing the index from the response, to replace the element at the same index
const add = (pokemon, index) => pokemonNameList[index] = (pokemon);
const getAll = _ => pokemonNameList; // Short arrow function to return pokemonNameList

async function loadList() {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/?limit=5');
    const result_1 = await response.json();

    Promise.all(result_1.results.map((item, index) => fetch(item.url).then(response_1 => response_1.json()).then(({
        name,
        height,
        weight
    }) => add({
        name,
        height,
        weight
    }, index)))).then(() => getAll().forEach(pokemon => console.log(pokemon)));
}

Answer 2

问题是您没有等待内部 fetch(item.url)s，所以当您调用 getAll 时还没有推送任何项目。

您可以通过将 forEach 更改为映射、返回承诺并添加一个 promise.all... 来做到这一点：

function loadList() {
    return fetch(apiUrl)
      .then((response) => response.json())
      .then((data) => {
        return Promise.all(data.results.map((item) => {
          return fetch(item.url)
  ...

无法使用 forEach() 方法遍历我的 API 生成的数组

Can't iterate over my API generated array using the forEach() method

javascript

foreach

fetch-api