反应 JSON 数据以显示在表格中 - Javascript

简介

在Web开发中，展示数据是经常遇到的问题。JavaScript 提供了很多处理数据的方法，其中最常用的就是 JSON 数据。本文将介绍如何使用 JavaScript 将 JSON 数据转换成表格，以便更直观的展示数据。

步骤

1. 获取数据

在此模拟获取 JSON 数据：

const jsonData = [
    {"id": "001", "name": "Tom", "age": "25"},
    {"id": "002", "name": "Jim", "age": "32"},
    {"id": "003", "name": "Lucy", "age": "27"}
];

2. 创建表格

使用 HTML 创建一个空表格。

<table id="table"></table>

3. 编写 JavaScript 代码

将 JSON 数据转成表格，代码如下：

const jsonData = [
    {"id": "001", "name": "Tom", "age": "25"},
    {"id": "002", "name": "Jim", "age": "32"},
    {"id": "003", "name": "Lucy", "age": "27"}
];

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

// 创建表头
let thead = table.createTHead();
let row = thead.insertRow();
for (let key in jsonData[0]) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
}

// 添加数据
let tbody = table.createTBody();
for (let i = 0; i < jsonData.length; i++) {
    let row = tbody.insertRow();
    for (let key in jsonData[i]) {
        let cell = row.insertCell();
        let text = document.createTextNode(jsonData[i][key]);
        cell.appendChild(text);
    }
}

这段代码首先创建了一个 table，然后使用 createTHead() 方法创建表头。 insertRow() 和 insertCell() 方法用于插入行和单元格。最后，使用循环将数据添加到表格中。

结束语

到此为止，我们已经学会了如何使用 Javascript 将 JSON 数据转换成表格！在这个示例中，我们只是用模拟数据实现了简单的表格。实际应用中，我们通常通过 AJAX 或后端语言来获取 JSON 数据，并将其呈现在表格中。

参考文献

• MDN - createTHead()

• MDN - insertRow()

• MDN - insertCell()