React JS 如何利用接口 Response 动态生成转置结构数据表格

实现方案 #

以下是原生JavaScript的完整实现，完全适配动态数据要求，无需手动写死属性或数据条数：

1. HTML部分（仅需一个表格容器）

<div id="tableContainer"></div>

2. JS逻辑部分

const response = [{
    time: 1,
    speed: 2,
    direction:3,
    image:'url1'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url2'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url3'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url4' 
}]

// 无数据边界处理
if (!response || response.length === 0) {
  document.getElementById('tableContainer').innerText = '暂无数据'
} else {
  // 提取所有属性名，这里过滤了image（因为image已用作表头，不需要作为行展示，无需过滤可删除filter部分）
  const propKeys = Object.keys(response[0]).filter(key => key !== 'image')
  const table = document.createElement('table')
  table.border = '1' // 仅为预览方便，可自行用CSS替换样式

  // 生成表头
  const thead = document.createElement('thead')
  const headerRow = document.createElement('tr')
  headerRow.appendChild(document.createElement('th')) // 表头第一个单元格留空
  // 遍历所有数据填充表头
  response.forEach(item => {
    const th = document.createElement('th')
    // 如果需要表头展示图片而非url，可替换为 th.innerHTML = `<img src="${item.image}" style="width:60px">`
    th.innerText = item.image
    headerRow.appendChild(th)
  })
  thead.appendChild(headerRow)
  table.appendChild(thead)

  // 生成表格内容
  const tbody = document.createElement('tbody')
  // 遍历所有属性生成行
  propKeys.forEach(key => {
    const row = document.createElement('tr')
    // 第一列填属性名
    const firstTd = document.createElement('td')
    firstTd.innerText = key
    row.appendChild(firstTd)
    // 遍历所有数据填充对应属性值
    response.forEach(item => {
      const td = document.createElement('td')
      td.innerText = item[key]
      row.appendChild(td)
    })
    tbody.appendChild(row)
  })
  table.appendChild(tbody)

  // 插入到页面
  document.getElementById('tableContainer').appendChild(table)
}

适配说明 #

• 动态性完全覆盖：属性名通过Object.keys自动读取，数据列通过遍历响应数组自动生成，无论返回多少条数据、多少个属性都可以正常渲染
• 如果需要将image也作为行展示，删除提取属性名时的filter过滤逻辑即可
• 表格样式可自行通过CSS自定义调整

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