使用 Response 动态创建表 React JS答案

【问题标题】：Using a Response to create a table React JS dynamically使用 Response 动态创建表 React JS
【发布时间】：2022-01-01 11:24:04
【问题描述】：

我目前收到返回这样一个数组的响应

 const response = [{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'

    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'
    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url' 
  }]

如何制作第一列仅包含属性名称的表。然后后续列包含来自响应的数据，分别使用图像 URL 作为标题我以前从未在 JS 中使用过表。它还需要是动态的，以便可以使用来自对象的任意数量的键生成任意数量的响应结果，因为数组中的所有对象都将具有相同的键

理想情况下，我希望表格看起来像这样

            image           image           image 
time          1               1               1 
speed         2               2               2
direction     3               3               3

【问题讨论】：

哪种 JavaScript 数据结构最能支持该表（对您而言）？这是问题的一半。
我不明白你的问题

标签： javascript html css reactjs styled-components

【解决方案1】：

不确定这是否是您想要的。您可以迭代对象的键和值。

  <table>
    <thead>
      <tr>
        <td />
        {response.map((el) => (
          <td>{el.image}</td>
        ))}
      </tr>
    </thead>
    <tbody>
      {Object.keys(response[0])
        .filter((k) => k !== "image")
        .map((k) => (
          <tr>
            <td>{k}</td>
            {response.map((r) => (
              <td>{r[k]}</td>
            ))}
          </tr>
        ))}
    </tbody>
  </table>

【讨论】：