我的 Get 請求在控制臺中回傳 1050 多個頁面。我正在嘗試以 HTML 顯示，當我這樣做時，結果會覆寫我的頁面和搜索欄。有什么辦法可以決定每頁只顯示 10 個？
這是我的功能：
//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);
這是處理輸入和顯示 div 的 HTML 檔案：
<form class="user-form" id="form">
<input type="search" id="input" placeholder="Search an Entity">
</form>
<div id="myData"></div>
這是回應的結構：
[
{
"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/"
}
]
uj5u.com熱心網友回復：
最簡單的解決方案是向顯示元素添加自動滾動。這會將顯示限制為 20 行，以免使頁面不堪重負。
<style>
#myData {
height: 20em;
overflow: auto;
}
</style>
查看代碼，這只是當用戶將國家名稱留空并回傳所有國家的所有資料時才會出現問題。因此，另一種方法是在國家名稱為空白時跳過查詢。這就是世界銀行國家資料 API 所做的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/467264.html
標籤：javascript html css jq