I have a huge data being returned from a fetch api call. I want to limit the displayed data to 10 per page and have more data returned when the next page button is clicked. How can I implement that?
limit is set to 10 and offset is set to 0. The maximum data that can be returned per page is 150.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class = B1 id="photos">View photos</button>
<div id="showResults"></div>
<div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<button class="page-link" id="nextButton">Next</button>
</li>
</ul>
</nav>
</div>
<script>
let limit = 10;
let offset = 0;
const showPhoto = (key, value) => {
const pre_x = document.createElement("pre");
const dt_x = document.createElement("dt");
const dd_x = document.createElement("dd")
dt_x.textContent = key;
pre_x.appendChild(dt_x);
{
dd_x.textContent = value;
}
pre_x.appendChild(dd_x);
return pre_x;
};
const structurePhotos = (obj) => {
const dl = document.createElement("dl");
for (let k in obj) {
let j = obj[k];
if (typeof obj[k] === "object") {
j = JSON.stringify(obj[k], null, 2);
}
dl.appendChild(showPhoto(k, j));
}
return dl;
};
function getPhotos(url) {
fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
if (Array.isArray(data)) {
data.forEach((photo) => {
showResults.append(
structurePhotos(photo),
);
});
}
})
.catch(console.error);
}
const photos = document.getElementById("photos");
photos.addEventListener(
"onclick",
getPhotos(`https://jsonplaceholder.typicode.com/photos`)
);
</script>
</body>
</html>
limit is set to 10 and offset is set to 0. The maximum data that can be returned per page is 150.
If you can not change the backend/API to use pagination - you can use the following function to split the Array with results from the API into smaller chunks:
function arrChunk(arr, size)
{
return arr.reduce((acc, e, i) =>
{
if (i % size)
{
acc[acc.length - 1].push(e);
}
else
{
acc.push([e]);
}
return acc;
}, []);
}
But the best option is to change the backend and avoid transferring excessive data over the network.