试图将 JSON 文件加载到 html 中，然后显示为表格并制作图表？答案

【问题标题】：Trying to load JSON file into html and then display as table and also making graphs?试图将 JSON 文件加载到 html 中，然后显示为表格并制作图表？
【发布时间】：2020-03-02 02:08:48
【问题描述】：

大家好，我正在做一个项目，我已将我的树莓派连接到 DynamoDB 并设法扫描数据库并创建以下 JSON 文件：

[{
    "Date": "24/02/2020",
    "onTime": "Present",
    "Surname": "Adams",
    "Forename": "Natalie",
    "clockedIn": "18:13:58",
    "StudentID": "0004743621"
}, {
    "Date": "25/02/2020",
    "onTime": "Present",
    "Surname": "Adams",
    "Forename": "Natalie",
    "clockedIn": "12:13:05",
    "StudentID": "0004743621"
}, {
    "Date": "24/02/2020",
    "onTime": "Absent",
    "Surname": "Pilgrim",
    "Forename": "Scott",
    "clockedIn": "NoTime",
    "StudentID": "0004627468"
}, {
    "Date": "25/02/2020",
    "onTime": "Late",
    "Surname": "Pilgrim",
    "Forename": "Scott",
    "clockedIn": "12:44:29",
    "StudentID": "0004627468"
}]

我正在运行一个 nodeJS 服务器来显示一个 HTML 页面，并且一直在尝试从 JSON 文件中获取数据，然后将其放入一个表中，然后还查询该表。

如果有人可以帮助我，那将是一个很大的帮助。提前致谢。

【问题讨论】：

标签： javascript html arrays node.js

【解决方案1】：

我喜欢客户端的 d3 库来完成这项任务： https://github.com/d3/d3-fetch

<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
<script>

d3.json("/path/to/file.json").then(function(data) {
  console.log(data);
});

</script>

【讨论】：

您好，感谢您的回复，我已尝试输入您提供的代码并不断收到错误消息：(index):1 Uncaught (in promise) SyntaxError: Unexpected token
我猜你的 json 文件没有作为 json 文件发送。

【解决方案2】：

如果您已经在视图中获取了 json，您可以：

使用var arr_from_json = JSON.parse( json_string );将json反序列化为对象。
获取表格 DOM 元素：// Find a <table> element with id="myTable": var table = document.getElementById("myTable");
为列表中的每个对象创建一行： var row = table.insertRow(0);
创建与对象中的属性一样多的单元格：var cell1 = row.insertCell(0);
为对象的每个属性添加数据到创建的行单元格：cell1.innerHTML = arr_from_json.myData;

【讨论】：