如何修复我的代码以显示一张桌子？

大母亲

我正在尝试呈现我的动态JSON，但是当每个结果应该呈现在同一张表中时，我会得到一个表。.这是怎么回事？我的虚拟数组是我后端API的模型

const arr = [
  {
      "Demo": [
          {
              "_id": "T08210",
              "name": "tilehaha",
              "tags": [
                  "Demo"
              ],
              "queries": [],
              "urls": [],
              "max_leght": [],
              "count_items": []
          },
      ],
    }
  ];

export default function Demo() {
  return (
    <div>
  {arr.map(obj =>
    Object.entries(obj).map(([key, value]) => (
        <table class="table">
        <thead>
          <tr key={key}>
            <th scope="col">{key}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
        </tbody>
      </table>
    )))}
</div>
  );
}

我需要将蓝色部分作为标题2671161009, and 2671161249，其子项如下

jnpdx

根据您的评论，似乎这是您想要的：

注意未来的观点-现在不适用于已更改的问题：


const modArray = Object.keys(arr[0]).map(i => {
  return {id: i, ...arr[0][i]}
});

const rowKeys = Object.keys(modArray[0]).filter(i => i !== "id")

export default function Demo() {
  return (
    <div>
      <table class="table">
        <thead>
          <tr>
          {modArray.map(i => <th key={i.id}>{i.id}</th>)}
          </tr>
        </thead>
        <tbody>
          <tr>
            {modArray.map(item => <td key={item.id}>{item.activityType}</td>)}
          </tr>
          <tr>
            {modArray.map(item => <td key={item.id}>{item.durationInSeconds}</td>)}
          </tr>

          {/* Or, do it dynamically */}
          {rowKeys.map(rowKey => <tr key={rowKey}>
            {modArray.map(item => <td key={item.id}>{item[rowKey]}</td>)}
          </tr>)}
    </tbody>
    </table>
  </div>
  );
  }

请注意，在该代码示例的顶部，我将您的输入转换为更可用的格式。arr例如，您的开始是一个只有1个对象的数组，它具有多个键，这实际上似乎是您要迭代的数组。

希望这至少与您要查找的内容接近。

更新2，基于您更改的问题：

export default function Demo() {
  return (
    <div>
      <table className="table">
        <thead>
          <tr>
          {arr[0]["Demo"].map(i => <th key={i._id}>{i._id}</th>)}
          </tr>
        </thead>
        <tbody>
          <tr>
            {arr[0]["Demo"].map(item => <td key={item._id}>{item.name}</td>)}
          </tr>
    </tbody>
    </table>
  </div>
  );
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。