When I click on Get Entries button, I expect the data from the entries endpoint to be returned.
However, I get this error:
Id:undefinedURL:undefinedName:undefinedDescription:undefined
The endpoint http://vk-data:8003/v1/entries/ returns this:
[
{
"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"
}
]
This is my code, what am i doing wrong?
<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>
How can I also place the returned data on different lines and not have them all lumped in one line?
>Solution :
You’re replacing the innerHTML in every iteration. Did you mean to append to it?
You should also be using the properties from each element iteration. Trying to access them on response (an array) is why you get undefined values.
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(({ id, url, name, description }) => [
`Id: ${id} URL: ${url} Name: ${name} Description: ${description}`,
document.createElement("br"),
document.createElement("br"),
])
);
})
.catch(console.error);