Как загрузить следующую страницу данных API, нажав кнопку «Загрузить еще»?
моя цель - отобразить некоторые пользовательские данные из API https://reqres.in/api/users?page=(это может быть 1,2 или более, если страницы доступны) и вывести их в html-таблицу с помощью JS/Promises. Итак, изначально мне удалось получить данные первой страницы в таблицу, и теперь мне нужно, чтобы они были изменены, когда я нажимаю кнопку «Загрузить еще», он должен удалить текущие данные в таблице и показать данные страницы 2. Это мой код до сих пор
let userDataTable = document.getElementById("userData");
var tot_pages;
let pagesCount = 1;
console.info(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.info(users);
console.info(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.info(error);
});
};
getUSerInfo();
console.info(tot_pages);
document
.getElementById("load_btn")
.addEventListener("click", () => getUSerInfo());
также когда не осталось страниц для загрузки (например, когда данные последней страницы отображаются в таблице, кнопка «Загрузить еще» не должна быть видна)
Я объясню, в чем заключалась моя идея: я пытался создать глобальную переменную (tot_pages), инициализируя ее значением 1. Затем внутри обещания я пытался назначить общее количество страниц из объекта, который я отображаю через reqres.in. и вернуть его на кнопку как счетчик или что-то в этом роде. Итак, например: когда я нажимаю кнопку, счетчик увеличивается (в этом случае увеличивается переменная tot_pages). Во всяком случае, после нескольких часов попыток я еще не смог этого сделать. Я действительно ценю, если кто-то может мне помочь. Спасибо за ваше время и внимание!
Так что да, код в вопросе - это мой подход, который заключается в создании глобальной переменной с именем tot_pages и переносе общего количества страниц reqres.in/users в эту переменную внутри обещания. Затем я подумал, может быть, если я смогу вернуть это за пределы функции, я смогу каким-то образом увеличить его с помощью счетчика. Я могу ошибаться, поэтому мне нужна помощь с этим кодом :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что ваш код будет нормально работать, если вы будете обновлять переменную pagesCount при каждой успешной выборке API, проверьте этот обновленный код. Я изменил имена некоторых переменных
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.info(error);
});
};
// fetch initial page
getUSerInfo();
Вы обновляете
tot_pages, но URL-адрес API использует другую переменнуюpageCount, которая никогда не обновляется, какова роль этих двух переменных?