Tengo una gran cantidad de datos que se devuelven de una llamada de búsqueda de API. Quiero limitar los datos mostrados a 10 por página y que se devuelvan más datos cuando se haga clic en el botón de página siguiente. ¿Cómo puedo implementar eso?
limit se establece en 10 y offset se establece en 0. Los datos máximos que se pueden devolver por página son 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 se establece en 10 y offset se establece en 0. Los datos máximos que se pueden devolver por página son 150.
Si no puede cambiar el backend/API para usar la paginación, puede usar la siguiente función para dividir la matriz con los resultados de la API en partes más pequeñas:
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; }, []); }Pero la mejor opción es cambiar el backend y evitar transferir demasiados datos a través de la red.