Node.js接口分页(POKEapi) for循环

Question

我已经使用POKEapi编写了代码，它显示了150个精灵的数量。

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

重点是，我需要对此进行分页以显示给ex。每页9个精灵。我试着使用这样的东西，但似乎不起作用(.js)。

我已经有了一个looop，它获得了150个带有精灵宝可梦数据的链接，所以我想我可以以某种方式做到这一点，这个循环将获得例如9个链接，然后显示它，在每次迭代中添加计数器，并启动相同的循环，但再次更新计数器(在第二次、第三次...)分页。

告诉我你对bc的看法我正在与之抗争，却不知道该怎么做。

下面是我想要使用的代码：

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

将数据与表示数据的方式分离(即模型/视图分离)将使你受益。因为Pokemon的数量有限，你可以一次加载它们，然后有一个单独的函数来过滤和处理较小的集合。例如：

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

通过将数据的加载与过滤和显示分离，您可以灵活地执行所需的操作，并且每个函数都执行一个可以理解并独立测试的特定工作。