如何使用按钮单击“加载更多”加载 API 数据的下一页？

Question

my goal is to render some user data from API https://reqres.in/api/users?page=( this can be 1,2 or more if pages are available) and output it to a html table using JS / Promises. So initially I have managed to get the first page's data to the table and now I need it to be modified when I click "Load More" button it should delete the current data on the table and shows the page 2's data. This is my code so far

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());

also when there are no pages left to load (ex: when the last page's data is showing in the table then the "Load More" button should not be visible)

I'll explain what my idea was achieving this task: I was trying to create a global variable(tot_pages) initializing it to 1. Then inside the promise I was trying to assign the total pages from the object which I render via reqres.in and return it to the button as a counter or something. So as an ex: When I click the button the counter will increase(in this case the tot_pages variable will increase). Anyway after hours of trying on my own could not get this done yet. I do really appreciate if someone can help me out. Thank you for you time and consideration!

Answer 1

I think your code will work fine with you updating pagesCount variable on each successful API fetch, check this updated code. I've changed some variable names

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();