如何将REST服务返回的JSON数据转换为HTML表格？

没问题！要把这个REST接口返回的员工数据转成HTML表格，用原生JavaScript就能轻松实现，下面是具体的实现方案，包含完整代码和细节说明：

核心思路 #

1. 获取REST接口的JSON响应数据（可以用浏览器原生的fetch API）
2. 提取响应中的items数组——这是我们要展示的员工数据集
3. 从数组的第一个员工对象中提取字段名，作为表格的表头
4. 遍历所有员工对象，为每个员工生成一行表格数据
5. 处理字段中的null值，替换为更友好的显示内容
6. 将构建好的表格插入到页面的指定容器中

完整代码示例 #

HTML结构 #

首先在页面中准备一个容器，用来放置生成的表格：

<div id="employee-table-container"></div>

JavaScript实现 #

// 模拟REST接口返回的数据（实际项目中替换为fetch请求）
const restResponse = {
  "items": [
    { "empno":8240, "ename":null, "job":null, "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":null },
    { "empno":8241, "ename":null, "job":null, "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":null },
    { "empno":7839, "ename":"QUEEN", "job":"PRESIDENT", "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":10 },
    { "empno":7698, "ename":"BLAKE", "job":"MANAGER", "mgr":7839, "hiredate":"1981-05-01T00:00:00Z", "sal":2850, "comm":null, "deptno":30 },
    { "empno":7566, "ename":"JONES", "job":"MANAGER", "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":20 },
    { "empno":7902, "ename":"FORDIAZ", "job":"ANALYST", "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":20 },
    { "empno":7844, "ename":"TURNER", "job":"SALESMAN", "mgr":7698, "hiredate":"1981-09-08T00:00:00Z", "sal":1500, "comm":0, "deptno":30 },
    { "empno":666, "ename":"Damian", "job":null, "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":null },
    { "empno":8220, "ename":null, "job":null, "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":null },
    { "empno":8221, "ename":null, "job":null, "mgr":null, "hiredate":null, "sal":null, "comm":null, "deptno":null }
  ],
  "hasMore":false,
  "limit":0,
  "offset":0,
  "count":10,
  "links":[
    { "rel":"self", "href":"https://apex.oracle.com/pls/apex/oraclejet/emp/" },
    { "rel":"edit", "href":"https://apex.oracle.com/pls/apex/oraclejet/emp/" },
    { "rel":"describedby", "href":"https://apex.oracle.com/pls/apex/oraclejet/metadata-catalog/emp/" }
  ]
};

// 渲染表格的核心函数
function renderEmployeeTable(data) {
  const container = document.getElementById('employee-table-container');
  const employeeItems = data.items;

  // 处理空数据的情况
  if (!employeeItems || employeeItems.length === 0) {
    container.innerHTML = '<p>暂无员工数据</p>';
    return;
  }

  // 获取表头字段（从第一个员工对象中提取键名）
  const tableHeaders = Object.keys(employeeItems[0]);

  // 创建表格元素并设置基础样式
  const table = document.createElement('table');
  table.style.width = '100%';
  table.style.borderCollapse = 'collapse';
  table.border = '1';

  // 构建表头
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');
  tableHeaders.forEach(header => {
    const th = document.createElement('th');
    th.textContent = header.toUpperCase(); // 转大写提升可读性
    th.style.padding = '8px';
    th.style.textAlign = 'left';
    th.style.backgroundColor = '#f2f2f2';
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 构建表体数据行
  const tbody = document.createElement('tbody');
  employeeItems.forEach(employee => {
    const row = document.createElement('tr');
    tableHeaders.forEach(header => {
      const td = document.createElement('td');
      // 处理null值，替换为"-"
      td.textContent = employee[header] ?? '-';
      td.style.padding = '8px';
      td.style.borderBottom = '1px solid #ddd';
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  // 将表格插入到页面容器中
  container.appendChild(table);
}

// 调用函数渲染表格
renderEmployeeTable(restResponse);

// 如果是实际从REST接口获取数据，替换为以下fetch代码：
/*
fetch('https://apex.oracle.com/pls/apex/oraclejet/emp/')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => renderEmployeeTable(data))
  .catch(error => {
    console.error('获取数据出错:', error);
    document.getElementById('employee-table-container').innerHTML = '<p>加载数据失败，请稍后重试</p>';
  });
*/

关键细节说明 #

• 自适应表头：通过Object.keys(employeeItems[0])自动提取字段名，即使接口返回的字段有变化，代码也能自动适配
• null值处理：用??空值合并运算符将null替换为-，避免表格显示空白，提升可读性
• 基础样式：添加了边框、内边距和表头背景色，让表格更美观易读
• 错误处理：包含了空数据和请求失败的处理逻辑，提升用户体验

内容的提问来源于stack exchange，提问作者2431992