Javascript 尝试将JSON文件加载到html中，然后显示为表并生成图形？

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

---

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

我想使用客户端的d3库来完成此任务：

d3.json（“/path/to/file.json”）。然后（函数（数据）{
控制台日志（数据）；
});

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

使用

var arr\u from\u json=json.parse（json\u字符串）将json反序列化为对象

获取表DOM元素：

//查找id=“myTable”的元素：
var table=document.getElementById（“myTable”）

为列表中的每个对象创建一行：

var行=table.insertRow（0）

创建与对象中的属性相同数量的单元格：

var cell1=row.insertCell（0）

对于对象的每个属性，向创建的行单元格添加数据：

cell1.innerHTML=arr\u from_json.myData

---

您好，感谢您的回复，我尝试输入您提供的代码，并不断收到错误：（索引）：1未捕获（承诺中）SyntaxError:Unexpected token<在JSON中的位置0我猜您的JSON文件没有作为JSON文件发送。

<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>