时间戳

首页 > 解决方案 > 试图将 JSON 文件加载到 html 中，然后显示为表格并制作图表？

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

问题描述

大家好，我正在做一个项目，我将树莓派连接到 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 文件中获取数据，然后将其放入表中，然后还查询所述表，但失败了。

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

标签： javascripthtmlarraysnode.js

解决方案

我喜欢客户端的 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>

推荐阅读