Is there a way to the limit number of API response data display on HTML?-CodePudding

My Get request returns over 1050 pages in the console. I am trying to display in HTML and when I do, the result covers my page and the search bar. Is there any way I can decide to display just 10 per page?

This is my function:

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

This is the HTML file that handles the input and display div:

<form  id="form">
  <input type="search" id="input" placeholder="Search an Entity">
</form>

<div id="myData"></div>

This is the structure of the response:

[
    {
        "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/"
            }
        ]

CodePudding user response：

The simplest solution would be to add an auto-scroll to the display element. This will limit the display to 20 lines so that it doesn't overwhelm the page.

<style>
#myData {
  height: 20em;
  overflow: auto;
}
</style>

Looking at the code, this is only a problem when the user leaves the country name blank and all data for all countries is returned. So an alternative would be to just skip the query when the country name is blank. That's what the World Bank country data API does.