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

Question

When I click on my button, I expect the data from the endpoint to be returned.

However, I get this error:

Id:undefinedURL:undefinedName:undefinedDescription:undefined

This is my function:

//fetch
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 + 'Type:' + response.type + "Name:" + response.name "<br><br>"

    });
})
.catch(error => console.error(error))

}

Answer 1

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(entry),
        document.createElement("br"),
        document.createElement("br"), // could also just use CSS margin
      ])
    );
  })
  .catch(console.error);