Mi solicitud Get devuelve más de 1050 páginas en la consola. Estoy tratando de mostrar en HTML y cuando lo hago, el resultado cubre mi página y la barra de búsqueda. ¿Hay alguna forma en que pueda decidir mostrar solo 10 por página?
Esta es mi función:
//fetch entities function function RetrieveEntities(e){ const nameOfCountries = e.target.value; const url = `http://8000/v1/data/${nameOfCountries}`; //http request fetch(url) .then(response => { if (!response.ok) { throw Error("Error"); } return response.json(); }) .then(data => { console.log(data); const html = data.map(entity => { return ` <div class="entity"> <p>ID: ${entity.id}</p> <p>ID: ${entity.url}</p> <p>ID: ${entity.type}</p> <p>ID: ${entity.name}</p> <p>ID: ${entity.legal.type}</p> <p>ID: ${entity.legal.text}</p> <p>ID: ${entity.legal.link}</p> </div> `; }).join(''); console.log(html) document .querySelector("#myData") .insertAdjacentHTML("afterbegin", html); }) .catch(error => { console.log(error); }); } const input=document.getElementById("input"); input.addEventListener("change", RetrieveEntities);Este es el archivo HTML que maneja el div de entrada y visualización:
<form class="user-form" id="form"> <input type="search" id="input" placeholder="Search an Entity"> </form> <div id="myData"></div>Esta es la estructura de la respuesta:
[ { "id": "5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168", "url": "http://8000/v1/data/country/5c02434187bc31589f270ae33efb56cbcc43ac0ffcc80d03b42990a0eb61a168", "type": "country", "name": "Afghanistan", "legal": [ { "type": "attribution", "text": "Data is supplied by Wikipedia", "link": "https://en.wikipedia.org/" } ]La solución más simple sería agregar un desplazamiento automático al elemento de visualización. Esto limitará la visualización a 20 líneas para que no sature la página.
<style> #myData { height: 20em; overflow: auto; } </style>Mirando el código, esto es solo un problema cuando el usuario deja el nombre del país en blanco y se devuelven todos los datos de todos los países. Entonces, una alternativa sería omitir la consulta cuando el nombre del país esté en blanco. Eso es lo que hace la API de datos de países del Banco Mundial.