當我單擊Get Entries按鈕時，我希望entries回傳來自端點的資料。
但是，我收到此錯誤：
Id:undefinedURL:undefinedName:undefinedDescription:undefined
端點 http://vk-data:8003/v1/entries/ 回傳：
[
{
"id": "country",
"url": "http://vk-data:8003/v1/entries/country",
"name": "Countries",
"description": "All the countries in the world"
},
{
"id": "data-site",
"url": "http://vl-data:8003/v1/entries/data-site",
"name": "World data storage",
"description": "A catalog of health data"
}
]
這是我的代碼，我做錯了什么？
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="results"></div>
<button id="catalog" onclick="RetrieveEntries()">Get Entries</button>
<script>
//fetch Entries
function RetrieveEntries(){
fetch("http://vk-data:8003/v1/entries/", {
headers:{
'x_auth': 'gdjsjaosh-hkds-dhjsk-hjjdbah',
'data': 'access-control',
}}
)
.then(function(response) {
return response.json()
})
.then((response) => {
var results = document.getElementById('results')
console.log(response)
response.forEach(element => {
results.innerHTML = 'Id:' response.id 'URL:' response.url "Name:" response.name "Description:" response.description "<br><br>"
});
})
.catch(error => console.error(error))
}
</script>
</body>
</html>
我怎樣才能將回傳的資料放在不同的行上，而不是將它們全部集中在一行中？
uj5u.com熱心網友回復：
您將innerHTML在每次迭代中替換 。你的意思是附加到它嗎？
您還應該使用每個元素迭代的屬性。嘗試在response（陣列）上訪問它們是您獲得undefined值的原因。
要格式化結果，您可能想要使用類似 a 的東西，<dl>它可以通過 CSS 輕松設定樣式。
const createElement = (tag, ...content) => {
const el = document.createElement(tag);
el.append(...content);
return el;
};
const formatData = ({ id, url, name, description }) =>
createElement(
"dl",
createElement(
"div",
createElement("dt", "Id"),
createElement("dd", id)
),
createElement(
"div",
createElement("dt", "URL"),
createElement("dd", Object.assign(createElement("a", url), { href: url }))
),
createElement(
"div",
createElement("dt", "Description"),
createElement("dd", description)
)
);
然后獲取您的資料，將陣列映射到格式化的元素并將它們附加到結果div...
const results = document.getElementById("results");
// empty the <div> for a fresh start
results.innerHTML = "";
fetch("http://vk-data:8003/v1/entries/", {
headers: {
x_auth: "gdjsjaosh-hkds-dhjsk-hjjdbah",
data: "access-control",
},
})
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
results.append(
...data.flatMap((entry) => [
formatData,
document.createElement("br"),
document.createElement("br"), // could also just use CSS margin
])
);
})
.catch(console.error);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/466252.html
標籤：javascript html 数组 获取 API
上一篇：日期時間的格式字串無效
下一篇：如何匹配訪問過的常見城市