将 JSON 数据转换为 HTML 表 - Javascript

在 Web 开发中，我们经常需要从服务器获取数据并将其呈现给用户。其中一种常见的方式是将数据转换为 HTML 表格。

在本文中，我们将介绍使用 Javascript 将 JSON 数据转换为 HTML 表格的步骤。

1. 获取 JSON 数据

首先，我们需要从服务器或其他来源获取 JSON 数据。可以使用 XMLHTTPRequest 或 Fetch API 发起HTTP请求来获取数据。在这里，我们将使用 Fetch API。

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 将数据转换为 HTML 表格
  })
  .catch(error => console.error(error));

2. 迭代数据并创建 HTML 表格

接下来，我们需要遍历 JSON 数据并使用其值创建 HTML 表格。我们可以使用 for 循环或 forEach() 方法。

const data = [
  { name: 'Alice', age: 23, gender: 'female' },
  { name: 'Bob', age: 25, gender: 'male' },
  { name: 'Charlie', age: 21, gender: 'male' },
];

const table = document.createElement('table');

// 创建表头
const tableHeader = table.createTHead();
const tableHeaderRow = tableHeader.insertRow();

Object.keys(data[0]).forEach(key => {
  const th = document.createElement('th');
  const text = document.createTextNode(key);
  th.appendChild(text);
  tableHeaderRow.appendChild(th);
});

// 创建表格主体
const tableBody = table.createTBody();
data.forEach(item => {
  const tableBodyRow = tableBody.insertRow();
  Object.values(item).forEach(value => {
    const td = document.createElement('td');
    const text = document.createTextNode(value);
    td.appendChild(text);
    tableBodyRow.appendChild(td);
  });
});

// 将表格添加到 DOM 中
document.body.appendChild(table);

3. 完整代码

下面是完整的示例代码。

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    const table = document.createElement('table');

    // 创建表头
    const tableHeader = table.createTHead();
    const tableHeaderRow = tableHeader.insertRow();

    Object.keys(data[0]).forEach(key => {
      const th = document.createElement('th');
      const text = document.createTextNode(key);
      th.appendChild(text);
      tableHeaderRow.appendChild(th);
    });

    // 创建表格主体
    const tableBody = table.createTBody();
    data.forEach(item => {
      const tableBodyRow = tableBody.insertRow();
      Object.values(item).forEach(value => {
        const td = document.createElement('td');
        const text = document.createTextNode(value);
        td.appendChild(text);
        tableBodyRow.appendChild(td);
      });
    });

    // 将表格添加到 DOM 中
    document.body.appendChild(table);
  })
  .catch(error => console.error(error));

4. 总结

在本文中，我们介绍了使用 Javascript 将 JSON 数据转换为 HTML 表格的步骤。通过遍历 JSON 数据并将其值添加到 HTML 表格中，我们可以将数据呈现给用户，以便更方便地查看和分析。