How can data from a GET request be displayed in HTML?-CodePudding

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?

CodePudding user response：

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.

To format the results, you might want to use something like a <dl> which can be styled easily with 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)
    )
  );

Then fetch your data, map the array to the formatted elements and append them to the results 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);