'Display GET Request data in HTML

This 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"
    }
]

How can I display the results of this GET Request in HTML? I am getting an error:

Id:undefinedURL:undefinedName:undefinedDescription:undefined

When the button is clicked, the data from the entity endpoint is returned. How can I also place the returned data on different lines and not have them all lumped in one line?

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


Solution 1:[1]

You can check some documents on MDN. Basically, you are going to:

  1. query 'document' object to get the DOM which you want to update with your data.

    const targetDom = document.querySelector('xxx')

  2. update the data through
    targtDom.innerText = xxx

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions