如何使用按钮单击 "Load More" 加载 API 的下一页数据？

Question

我的目标是从 API https://reqres.in/api/users?page= 渲染一些用户数据（如果页面可用，这可以是 1,2 或更多）并输出使用 JS / Promises 到 html table。所以最初我设法将第一页的数据获取到 table 现在我需要修改它当我单击“加载更多”按钮时它应该删除 table 上的当前数据并显示第 2 页的数据。到目前为止，这是我的代码

let userDataTable = document.getElementById("userData");

var tot_pages;
let pagesCount = 1;

console.log(tot_pages);
let getUSerInfo = function () {
  fetch(`https://reqres.in/api/users?page=${pagesCount}`)
    .then((response) => response.json())
    .then((people) => {
      let users = people.data;
      tot_pages = people.total_pages;
      console.log(users);
      console.log(tot_pages);
      for (let i = 0; i < users.length; i++) {
        let htmlContent = `<tr><td>${users[i].id}</td><td><img src="${users[i].avatar}"/></td><td>${users[i].first_name}</td><td>${users[i].last_name}</td><td>${users[i].email}</td></tr>`;
        userDataTable.insertAdjacentHTML("beforeend", htmlContent);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
};
getUSerInfo();
console.log(tot_pages);

document
  .getElementById("load_btn")
  .addEventListener("click", () => getUSerInfo());

当没有剩余页面可供加载时（例如：当最后一页的数据显示在 table 中时，“加载更多”按钮不应该可见）

我将解释我的想法是如何完成这项任务的：我试图创建一个全局变量（tot_pages）并将其初始化为 1。然后在 promise 中我试图分配总页数来自我通过 reqres.in 和 return 渲染的对象作为计数器或其他东西到按钮。所以作为一个例子：当我点击按钮时，计数器会增加（在这种情况下，tot_pages 变量会增加）。无论如何，经过数小时的尝试，我自己仍然无法完成这项工作。如果有人能帮助我，我真的很感激。感谢您的时间和考虑！

Answer 1

我认为您的代码将在每次成功 API 获取时更新 pagesCount 变量时正常工作，请检查此更新后的代码。我更改了一些变量名

let totalPages,
    currentPage = 0,
    loadMoreBtn = document.getElementById("load_btn");

// bind load more button
loadMoreBtn.addEventListener("click",getUSerInfo);

// fetch people
 function getUSerInfo() {
    // ignore if all data has been loaded
    if(currentPage >= totalPages) return
    
    const nextPage = currentPage + 1;
    fetch(`https://reqres.in/api/users?page=${nextPage}`)
        .then((response) => response.json())
        .then((people) => {
             const users = people.data,
             userDataTable = document.getElementById("userData");

             totalPages = people.total_pages;

             // hide load more button
             if(totalPages == nextPage) loadMoreBtn.style.visibility = 'hidden';

             // udate table data
             for (let i = 0; i < users.length; i++) {
                 let htmlContent = `<tr><td>${users[i].id}</td><td><img src="${users[i].avatar}"/></td><td>${users[i].first_name}</td><td>${users[i].last_name}<  /td><td>${users[i].email}</td></tr>`;
                  userDataTable.insertAdjacentHTML("beforeend", htmlContent);
             }

             currentPage = nextPage;
        })
        .catch(function (error) {
             console.log(error);
        });
    };

 // fetch initial page
 getUSerInfo();

如何使用按钮单击 "Load More" 加载 API 的下一页数据？

How to load the next page of the API's data using button click "Load More"?

html

javascript

rendering

es6-promise