如何在HTML中显示来自GET请求的数据？

Question

单击按钮时，希望返回来自端点的数据。

但是，我得到了以下错误：

Id:undefinedURL:undefinedName:undefinedDescription:undefined

这是我的职责：

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

在每次迭代中都要替换innerHTML。你是有意追加的吗？

您还应该使用每个元素迭代中的属性。尝试在response (数组)上访问它们是获取undefined值的原因。

要格式化结果，您可能需要使用类似于的东西，它可以很容易地用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)
    )
  );

然后获取数据，将数组映射到格式化的元素，并将它们附加到结果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);