Javascript 仅获取项目'；x'；当用户滚动时，从api而不是全部加载项目并加载更多内容

我正在制作一个简单的GK应用程序，显示用户有关国家的信息，并使用restcountries API。 我向你提出一个请求“https://restcountries.eu/rest/v2/all“它返回所有国家的数据。 但是，我如何从API中仅对某些国家（如前10个或15个国家）发出请求，将其显示在网页上，或者在返回所有内容后，仅显示前10个或15个国家，并且一旦用户向下滚动API中的更多内容时，如何将其显示在网页上

其他国家API链接：

HTML代码：
//国家/地区显示在此块中
JS代码：
功能显示国家（国家）{
countries.forEach（（国家）=>{
控制台日志（国家）；
让countryCard=$(`
${country.name}
人口：${country.Population}
地区：${country.Region}
大写：${country.Capital}
`);
美元（“.list of countries”）。附加（countryCard）；
});
}
window.onload=fetch（“https://restcountries.eu/rest/v2/all")
。然后（（响应）=>{
如果（！response.ok）{
抛出错误（response.statusText）；
}
返回response.json（）；
})
。然后（（响应）=>{
国家（答复）；
})
.catch（（错误）=>{
控制台日志（err）；
});

如果API不提供此类功能，您将无能为力（除非仅在前端分页）。也许所有的端点都只是静态页面，您可以直接获取好的……但就像所有数据返回后一样，我是否可以执行javascript函数来仅显示某些项目，您可以稍后对其执行任何操作。如果API不提供此类功能，您将无法对其执行任何操作（除非仅在前端进行分页）。也许所有的端点都只是静态页面，您可以直接获取好的…但是就像所有数据返回后一样，我是否可以执行javascript函数来仅显示某些项，您可以稍后使用它执行任何操作。

    HTML CODE:
       <div class="list-of-countries">
          //Countries are displayed in this block
       </div>

    JS CODE:
        function displayCountries(countries) {
  countries.forEach((country) => {
    console.log(country);
    let countryCard = $(`<div class="card" style="width: 18rem;">
   <img src="${country.flag}" class="card-img-top" alt="${country.name} Flag">
   <div class="card-body">
     <h5 class="card-title">${country.name} </h5>
       <p class="card-text">Population : ${country.population}</p>
       <p class="card-text">Region : ${country.region}</p>
       <p class="card-text">Capital : ${country.capital}</p>
   </div>
  </div>`);

    $(".list-of-countries").append(countryCard);
  });
}
window.onload = fetch("https://restcountries.eu/rest/v2/all")
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json();
  })
  .then((response) => {
    displayCountries(response);
  })
  .catch((err) => {
    console.log(err);
  });