显示从 fetch 到 HTML 的数据结果

Question

我正在尝试显示本地服务器的计算结果列表。在控制台上，数据显示为对象数组，但在页面上，它显示为每个 li 的分隔字符串字符。如何在每个里显示每个对象的内容？

这是控制台记录的内容：

[{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate" :1645041579497,"_id":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result" :144,"createdDate":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number" :12,"result":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"}]

  const list = document.getElementById("list");

  fetch(resultURL)
    .then((response) => response.json())
    .then((data) => {
      const calcResults = JSON.stringify(data.results);

      console.log(calcResults);
      for (let i = 0; i < calcResults.length; i++) {
        let li = document.createElement("li");
        li.innerHTML = calcResults[i];
        list.appendChild(li);
      }
    });
}
window.addEventListener("load", fibonacci);

Answer 1

你的calcResults是一个字符串，不是一个对象。请改用 data.results。

从外观上看，您的结果是文档形状：{ results: Result[] }，因此来自 fetch 的 data 包含一个具有 results 成员的文档。

您已经调用 json() 将您的对象转换为对象，因此繁重的工作已经完成。

for (let i = 0; i < data.results.length; i++) {
  let li = document.createElement("li");
  li.innerHTML = data.results[i];
  list.appendChild(li);
}

附带说明一下，如果您记录 data.results 而不是将其字符串化，您的调试 window 将让您 expand/collapse.

console.log(data.results);

Answer 2

我收到你的问题了。您正在将完整的对象附加到 DOM。相反，您需要将 Object 的值附加到 DOM。看下面的例子，我附加了计算结果data[i].result，你可以这样做任何值。

var data = [{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate":1645041579497,"_id":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result":144,"createdDate":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number":12,"result":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"},{"number":5,"result":5,"createdDate":1623234311998,"_id":"XT2rgLbEQC5ADC2J"},{"number":4,"result":3,"createdDate":1644936028242,"_id":"YXmMmbYvrekHQar4"},{"number":8,"result":21,"createdDate":1623234317407,"_id":"b5M24lLggweXY24L"},{"number":10,"result":55,"createdDate":1581587938016,"_id":"itAGET6wHw6wcxfN"},{"number":11,"result":89,"createdDate":1645015996622,"_id":"jD3M4opGHCmS7yiM"},{"number":6,"result":8,"createdDate":1644935779049,"_id":"jFFWDD6ir6U2Z4pH"},{"number":12,"result":144,"createdDate":1644936046931,"_id":"jG2G6GoP9ZJRMNim"},{"number":5,"result":5,"createdDate":1644935775114,"_id":"xu1oairIRQbE19G1"}]

  const list = document.getElementById("list");

for (let i = 0; i < data.length; i++) {
        let li = document.createElement("li");
        li.innerHTML = data[i].result;
        list.appendChild(li);
      }

<ul id="list">
</ul>

Answer 3

发生这种情况是因为您使用 JSON.stringify 而不是 JSON.parse。因此，您基本上是在遍历一个字符串，当您引用 calcResults[i] 时，您将在该字符串的索引处获得字符。

您需要调用 JSON.parse(data.result) 才能将字符串转换为对象。然后就可以遍历JS Array的对象了。

但是，如果您的本地服务器使用 JSON 主体解析器，您实际上不需要调用 JSON.parse 结果。

显示从 fetch 到 HTML 的数据结果

Displaying data results from fetch to HTML

javascript

json

fetch