如何修復我的代碼以顯示一個表格？

Question

我正在嘗試渲染我的動態 JSON，但是當它應該在同一個表中渲染時，我得到了每個結果的表。這是怎么回事？ 我的虛擬數組是來自我的后端 api 的 model

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 ，它們的子項如下

Answer 1

嘗試這個。

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

Answer 2

根據您的評論，這似乎是您想要的：

注意未來的觀點 - 現在不適用於更改后的問題：

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 個 object 的數組，它有多個鍵，這似乎是你想要迭代的數組。

希望這至少接近您正在尋找的內容。

更新 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>
  );
  }

Answer 3

問題在這里：

{arr.map(obj =>
    Object.entries(obj).map(([key, value]) => (
        <table class="table">

在這里，您已將整個表格放入循環中，而不是放入單個表格行。 因此，在每次迭代中，它都會生成一個新表。 要解決此問題，請嘗試以下操作：

嘗試這個：

<table class="table">
    <thead>
      <tr>
        <th scope="col">Heading 1</th>
        <th scope="col">Heading 2</th>
      </tr>
    </thead>
    <tbody>
    {
    arr.map(obj =>
        Object.entries(obj).map(([key, value]) => ( 
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
     )))}
     </tbody>
 </table>