当前位置：首页 > 行业动态 > 正文

html表中的JSON数组

通过解析JSON数组，使用JavaScript动态创建HTML表格结构，遍历数组生成表头和数据行，或借助React/Vue等框架的指令直接渲染数组为表格

数据结构说明

JSON数组是包含多个对象的集合,每个对象对应表格中的一行数据。

[
  {"name": "张三", "age": 25, "city": "北京"},
  {"name": "李四", "age": 30, "city": "上海"}
]

HTML表格与JSON映射关系

JSON对象属性 表格列名 数据类型
name 姓名 字符串
age 年龄 数字
city 所在城市 字符串

转换方法步骤

  1. 解析JSON数据
    使用 JSON.parse() 将JSON字符串转为JavaScript对象

  2. 创建表格结构

    • 生成<table>元素
    • 创建表头<thead>（取JSON对象的key）
    • 创建表体<tbody>

  3. 填充表格内容
    遍历JSON数组，为每个对象：

    • 创建<tr>行
    • 按顺序填充<td>单元格

示例代码实现

<!DOCTYPE html>
<html>
<body>
<div id="table-container"></div>
<script>
const jsonData = [
  {"name": "张三", "age": 25, "city": "北京"},
  {"name": "李四", "age": 30, "city": "上海"}
];
// 创建表格元素
const table = document.createElement('table');
const thead = table.createTHead();
const tbody = table.createTBody();
// 生成表头
const headerRow = thead.insertRow();
Object.keys(jsonData[0]).forEach(key => {
  const th = document.createElement('th');
  th.textContent = key;
  headerRow.appendChild(th);
});
// 生成表体
jsonData.forEach(item => {
  const row = tbody.insertRow();
  Object.values(item).forEach(value => {
    const cell = row.insertCell();
    cell.textContent = value;
  });
});
// 挂载到页面
document.getElementById('table-container').appendChild(table);
</script>
</body>
</html>

动态数据处理扩展

功能需求 实现方式
处理空数组 显示提示信息”暂无数据”
支持嵌套对象 递归展开嵌套结构，生成多级表头
数据排序 添加表头点击事件，按指定字段排序
异步获取数据 使用fetch()获取API数据后执行相同渲染逻辑

相关问题与解答

Q1：如何处理包含嵌套对象的JSON数组？

A1：需要递归解析嵌套结构，例如遇到{"user": {"name": "张三"}}时，可展开为两列：user.name，或在表格中嵌套子表格。

Q2：如何从远程API获取数据并生成表格？

A2：使用fetch()获取数据后执行相同逻辑：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 此处插入上述表格生成代码
  });
json数组数据转换
0

相关文章