在 HTML 中显示 GET 请求数据

Question

这个端点 http://vk-data:8003/v1/entries/ returns 这个：

[
    {
        "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 中显示此 GET 请求的结果？我收到一个错误：

Id:undefinedURL:undefinedName:undefinedDescription:undefined

单击按钮时，返回来自 entity 端点的数据。我怎样才能将返回的数据放在不同的行上，而不是将它们全部集中在一行中？

这是我的代码，我做错了什么：

<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>

Answer 1

您可以查看MDN上的一些文档。基本上，您将：

查询 'document' 对象以获取要用数据更新的 DOM。

const targetDom = document.querySelector('xxx')
通过
更新数据 targtDom.innerText = xxx

在 HTML 中显示 GET 请求数据

Display GET Request data in HTML

javascript

html

rest

get

fetch