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

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。你是想 append 吗？

您还应该使用每个 element 迭代的属性。尝试在 response（数组）上访问它们是您获得 undefined 值的原因。

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

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

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

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

javascript

html

arrays

fetch-api