使用 Response 动态创建表 React JS

Posted 2023-02-22

【中文标题】使用 Response 动态创建表 React JS

【英文标题】：Using a Response to create a table React JS dynamically

【发布时间】：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 数据结构最能支持该表（对您而言）？这是问题的一半。

我不明白你的问题

【参考方案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>