json请求的数据如何显示在表格中

如果你是一位前端开发者，那么你一定遇到过这样的需求：将JSON请求的数据显示在表格中，别担心，今天就来教你如何轻松实现这一功能！👏👏

我们要明确JSON数据的结构，通常情况下,JSON数据都是以键值对的形式存在的。

{
  "data": [
    {"id": 1, "name": "张三", "age": 20},
    {"id": 2, "name": "李四", "age": 22},
    {"id": 3, "name": "王五", "age": 25}
  ]
}

这个JSON数据包含了一个名为data的数组，数组中有三个对象，每个对象都有id、name和age三个属性。

我们就来看看如何将这样的数据展示在表格中。

json请求的数据如何显示在表格中

第一步：创建HTML结构

我们需要创建一个HTML文件，并在其中添加一个表格元素,如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据将在这里展示 -->
    </tbody>
  </table>
</body>
</html>

第二步：解析JSON数据并填充到表格中

我们需要使用JavaScript来解析JSON数据，并将其填充到表格中,以下是具体的代码：

// 假设我们已经从后端获取了JSON数据
var jsonData = {
  "data": [
    {"id": 1, "name": "张三", "age": 20},
    {"id": 2, "name": "李四", "age": 22},
    {"id": 3, "name": "王五", "age": 25}
  ]
};
// 获取表格的tbody元素
var tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
// 遍历JSON数据
jsonData.data.forEach(function (item) {
  // 创建新的tr元素
  var tr = document.createElement('tr');
  // 创建序号td元素并添加到tr中
  var tdId = document.createElement('td');
  tdId.innerText = item.id;
  tr.appendChild(tdId);
  // 创建姓名td元素并添加到tr中
  var tdName = document.createElement('td');
  tdName.innerText = item.name;
  tr.appendChild(tdName);
  // 创建年龄td元素并添加到tr中
  var tdAge = document.createElement('td');
  tdAge.innerText = item.age;
  tr.appendChild(tdAge);
  // 将tr元素添加到tbody中
  tbody.appendChild(tr);
});