在这种情况下，如何实现array.slice（）或分页？-解网

问：

目标：我只想每页显示 5 个数组项，并在底部分页。

<< HTML >>

 <head>
 <title>Animals API</title>
  </head>
 <body>
    <section class="container">
      <div class="info-cover">
        <div class="center">
          <img src="../animals/images/logo1.png" alt="Logo" class="logo" />
        </div>
        <div class="center search-area">
          <input
            type="text"
            class="container text-container"
            id="input-area"
            onclick="this.value=''"
            placeholder="Search here..."
          />
          <button class="search-button" id="search-button">&#x1F50D;</button>
        </div>
      </div>
      <section id="info-board">
        <div class="info-center">
          <h1>Cheetah</h1>
          <h4>Fun Facts!</h4>
          <li>Cheetah is the fastest land mammal in the world.</li>
          <li>Cheetah tends to hunt around or move around in groups.</li>
          <li>Cheetah can run up to 70 mph.</li>
          <li>Cheetah is usually found in Asia and Africa.</li>
          <li>Cheetah lives between 10 to 12 years.</li>
        </div>
      </section>
      <div class="item-container">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#">Previous</a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
          </ul>
        </nav>
      </div>
    </section>
<script src="js/animals.js"></script>
  </body>

<< JavaScript >>

let animal = [];
let searchButton = document.getElementById("search-button");
let inputArea = document.getElementById("input-area");
let url;
// <<<<<< FOR PAGINATION >>>>>>>

const getAnimalAPI = async () => {
  let header = new Headers({
    "X-Api-Key": "blah blah blah key",
  });
  let response = await fetch(url, { headers: header });
  let data = await response.json();

  animal = Object.values(data);
  
  let total_pages = data.length;
  let page = Math.ceil(total_pages / 5);

  animalHTML = page;
  document.getElementById("info-board").innerHTML = animalHTML;
  render();
};

const getAnimalInfo = async () => {
  url = new URL(`this is the api address`);
  getAnimalAPI();
};

const getAnimalInfoByKeyword = async () => {
  let keyword = document.getElementById("input-area");
  url = new URL(`${specialized api address}`);
  getAnimalAPI();
};

const render = () => {
  let animalHTML = "";

  animalHTML = animal
    .map((animals) => {
      return ` <div class="info-center">
    <h1>${animals.name}</h1>
    <h4>Fun Facts!</h4>
    <li>${animals.name} is ${
        animals.characteristics.slogan
          ? animals.characteristics.slogan.toLowerCase()
          : "[missing info]"
      }</li>
    <li>${animals.name} tends to hunt around or move around in ${
        animals.characteristics.group_behavior
          ? animals.characteristics.group_behavior.toLowerCase()
          : "[missing info]"
      }.</li>
    <li>${animals.name} can run up to ${
        animals.characteristics.top_speed
          ? animals.characteristics.top_speed
          : "[missing info]"
      }.</li>
    <li>${animals.name} is usually found in ${
        animals.characteristics.location
          ? animals.characteristics.location
          : "[missing info]"
      }.</li>
    <li>${animals.name} lives between ${
        animals.characteristics.lifespan
          ? animals.characteristics.lifespan
          : "[missing info]"
      }.</li>
    </div>`;
    })
    .join("");

  document.getElementById("info-board").innerHTML = animalHTML;
};

searchButton.addEventListener("click", getAnimalInfoByKeyword);

inputArea.addEventListener("keypress", function (event) {
  if (event.code === "Enter") {
    event.preventDefault();
    getAnimalInfoByKeyword();
    inputArea.value = "";
  }
});

getAnimalInfo();

从目标 API 站点呈现信息是好的。根据我搜索的关键字，我得到 20 个数组到 44 个数组。

以下是关键字搜索的示例： “狗”搜索上的 44 个数组 - Web 控制台，Google Chrome 有关 Web 控制台的更多详细信息 - Google Chrome

这就是我卡住的地方：

<< JavaScript >>

  let total_pages = data.length;
  let page = Math.ceil(total_pages / 5);

我尝试使用 innerHTML 渲染“页面”，但我认为我不明白该怎么做。

请问有什么建议吗？

JavaScript API 分页切片

答： 暂无答案

上一个：在我制作的“_reduce”函数中，拼接数组被分配给原始数组，但没有改变，为什么？

下一个：如何遍历数组并使其仅返回少数元素，具体取决于 React 状态

在这种情况下，如何实现array.slice（）或分页？

How do I implement array.slice() or pagination in this case?

评论