来自 API Node.js (POKEapi) 的分页 for 循环

Question

我使用 POKEapi 编写了代码，它显示了 150 个口袋妖怪的数量。

我刚开始学习js，这是我在node.js中的第一个应用。

关键是，我需要对它进行分页以显示前任。每页 9 个口袋妖怪。我尝试使用类似的东西，但它似乎不起作用（.js）。

我已经有一个循环，它获得了 150 个带有 pokemon 数据的链接，所以我想我可以通过某种方式实现，这个循环将获得例如 9 个链接，然后显示它，每次迭代都添加计数器，然后开始相同循环但再次更新计数器（在第二个，第三个..）分页。

告诉我你对这件事有什么看法，因为我正在与这个作斗争并且不知道如何做到这一点。

这是我想使用的代码：

const count = 0;
const limit = 9;
const fetchPokemon = (inType) => {
  console.log(inType);
  const promises = [];
  for (let i = 1; i <= 150; i++) {
    count++;
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    promises.push(fetch(url).then((res) => res.json()));
    if (count === limit) {
      break;
    }
  }
  Promise.all(promises).then((results) => {
    let pokemon = results.map((data) => ({
      name: data.name,
      id: data.id,
      image: data.sprites["front_default"],
      type: data.types.map((type) => type.type.name).join(", "),
    }));
    if (typeof inType != "undefined") {
      pokemon = pokemon.filter((row) => row.type.includes(inType) === true);
    }
    console.log(pokemon);
    displayPokemon(pokemon);
  });
};


const displayPokemon = (pokemon) => {
  const pokemonHTMLString = pokemon
    .map(
      (pokeman) =>
        `
<li class="card">
    <img class="card-image" src="${pokeman.image}"/>
    <h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
    <p class="card-subtitle">Type: ${pokeman.type}</p>
</li>
  `
    )
    .join("");
  pokedex.innerHTML = pokemonHTMLString;
};

现在的工作代码：(.js)

"use-strict";

const pokedex = document.getElementById("pokedex");
const dropdown = document.getElementById("dropdown");
console.log(pokedex);
const fetchPokemon = (inType) => {
  console.log(inType);
  const promises = [];
  for (let i = 1; i <= 150; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    promises.push(fetch(url).then((res) => res.json()));
  }
  Promise.all(promises).then((results) => {
    let pokemon = results.map((data) => ({
      name: data.name,
      id: data.id,
      image: data.sprites["front_default"],
      type: data.types.map((type) => type.type.name).join(", "),
    }));
    if (typeof inType != "undefined") {
      pokemon = pokemon.filter((row) => row.type.includes(inType) === true);
    }
    console.log(pokemon);
    displayPokemon(pokemon);
  });
};
const displayPokemon = (pokemon) => {
  const pokemonHTMLString = pokemon
    .map(
      (pokeman) =>
        `
<li class="card">
    <img class="card-image" src="${pokeman.image}"/>
    <h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
    <p class="card-subtitle">Type: ${pokeman.type}</p>
</li>
  `
    )
    .join("");
  pokedex.innerHTML = pokemonHTMLString;
};
fetchPokemon();

谢谢

Answer 1

将数据与呈现数据的方式分开（即模型/视图分离）将使您受益。由于口袋妖怪的数量有限，您可以一次加载它们，然后有一个单独的功能来过滤和处理较小的一组。例如：

const fetchPokemon = () => {
  console.log(inType);
  const promises = [];
  for (let i = 1; i <= 150; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    promises.push(fetch(url).then((res) => res.json()));
  }
  return Promise.all(promises).then((results) => {
    return results.map((data) => ({
      name: data.name,
      id: data.id,
      image: data.sprites["front_default"],
      type: data.types.map((type) => type.type.name).join(", "),
    }));
  });
};

const getPokemonOfType(allPokemon, inType) {
  if (inType) {
    return allPokemon.filter((row) => row.type.includes(inType));
  }
  return allPokemon;
}

const displayPokemon(pokemon, start, limit) {
  const pokemonHTMLString = "";
  for (let i=start; i<limit && i< pokemon.length; i++) {
    const pokeman = pokemon[i];
    pokemonHTMLString += `
<li class="card">
    <img class="card-image" src="${pokeman.image}"/>
    <h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
    <p class="card-subtitle">Type: ${pokeman.type}</p>
</li>
`
  }  // end for-loop

  pokedex.innerHTML = pokemonHTMLString;
}

// so first you'd get all like this:
const allPokemon = await fetchPokemon();
// then you can get just the types you want:
const fatOnes = getPokemonOfType(allPokemon, "fat");
// then display as many as you like:
displayPokemon(fatOnes, 18, 9); // show from 18 through 26

通过将数据加载与过滤和显示分开，您可以灵活地做您想做的事情，并且每个功能都执行可以理解和独立测试的特定工作。