从 HTML 文件访问 JSON 文件以使用对象

【问题标题】：Accessing a JSON file from HTML file to use objects从 HTML 文件访问 JSON 文件以使用对象
【发布时间】：2019-09-20 18:54:30
【问题描述】：

我正在制作一个待办事项列表，并且我正在尝试制作一个 JSON 文件来链接待办事项上每个项目的对象。

我不太确定自己应该做什么，也不确定自己应该寻求什么帮助。

// This is an example object
{
 "id":"01",
 "desc":"Do the To-Do List"
 },

我希望能够查看我从 JSON 文件中绘制的对象并将其显示为表格。

【问题讨论】：

标签： javascript html arrays json object

【解决方案1】：

如果您想将其显示为表格（并且每个对象都有id 和desc 属性）循环遍历每个对象（我假设它们在对象数组中）并创建一个新行：

const data = [{"id":"01","desc":"Do the To-Do List"},{"id":"02","desc":"Number Two!"},{"id":"03","desc":"A third option"}];
const table = document.getElementById("table");
data.forEach(({ id, desc }) => table.innerHTML += `<tr><td>${id}</td><td>${desc}</td></tr>`);

<table id="table" border="1">
  <tr>
    <th>Id</th>
    <th>Desc</th>
  </tr>
</table>

【讨论】：