Javascript 从复杂JSON迭代到表中

我正在努力使用JavaScript中的可选链接将JSON对象映射到

React

中的

表。这是有效载荷：

{
    "originating request": {
        "id":1,
        "name":"ali",
        "markets": [
            {
                "name": "Winner",
                "selections": [
                    {
                        "name": "Manchester United",
                        "probability": "1.0"
                    },
                    {
                        "name": "Tottenham Hotspur",
                        "probability": "0.0"
                    },
                    {
                        "name": "Arsenal",
                        "probability": "0.0"
                    }
                ]
            },
            {
                "name": "Finish Last",
                "selections": [
                    {
                        "name": "Manchester United",
                        "probability": "0.0"
                    },
                    {
                        "name": "Tottenham Hotspur",
                        "probability": "0.0"
                    },
                    {
                        "name": "Arsenal",
                        "probability": "1.0"
                    }
                ]
            }
        ]
    }
}

以前，
markets
数组中只有一个对象，即
Winner
market。这是我针对该场景的解决方案，在该方案中，我会立即筛选出
获胜者
，并遍历该表：

return (
<div>
 <Table striped bordered hover size="sm" responsive>
            <thead>
              <tr className="same-col-widths">
                <th>Team Name</th>
                <th>Winner</th>
            </thead>
            <tbody>
              {simResult?.markets?.length
                ? simResult.markets
                    .find(t => t.name === "Winner")
                    .selections.map((selection, index) => (
                      <tr key={index}>
                        <td>{selection.name}</td>
                        <td>{selection.probability}</td>
                      </tr>
                    ))
                : null}
            </tbody>
</Table>
</div>
)

在一列中列出团队名称，在相关列中列出与正确市场对应的所有概率。执行此操作的最佳方法是什么？
因此，首先要使用
reduce
重新格式化输入数据，以收集每个团队（表中的每一行）的所有数据，以便在创建表时更轻松地映射这些数据。如果将来输入格式发生变化，将此逻辑从表创建中分离也会使您更有弹性

const reformattedData = data["originating request"].markets.reduce(
    (accumulator, market) =>
      market.selections.map(({ name, probability }, index) => ({
        ...accumulator[index],
        "Team name": name,
        [market.name]: probability,
      })),
    [],
  );

这将以更便于表格的格式提供：

[
    { "Team name": "Manchester United", "Winner": "1.0", "Finish Last": "0.0" },
    { "Team name": "Tottenham Hotspur", "Winner": "0.0", "Finish Last": "0.0" },
    { "Team name": "Arsenal", "Winner": "0.0", "Finish Last": "1.0" },
]

然后，您可以使用这个新对象的键来映射并获取表头列表，然后映射每个对象的值以创建行

 <table>
      <thead>
        <tr>
          {Object.keys(reformattedData[0]).map((header, index) => (
            <th key={index}>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {reformattedData.map((teamData, index) => (
          <tr key={index}>
            {Object.values(teamData).map((cellInfo, index) => (
              <td key={index}>{cellInfo}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>


{Object.keys（重新格式化数据[0]）.map（（头，索引）=>(
{header}
))}
{重新格式化数据.map（（团队数据，索引）=>(
{Object.values（teamData.map）（（cellInfo，index）=>(
{cellInfo}
))}
))}

看到它在这个
中工作了吗？你在数据json中有“赢家”和“最后完成”的概率，你打算如何将其转换为表中的“赢家”和“前两名完成”呢？啊，输入错误。它是为了表示我将添加的未来对象。我已将“前两名完成”更正为“最后完成”
 <table>
      <thead>
        <tr>
          {Object.keys(reformattedData[0]).map((header, index) => (
            <th key={index}>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {reformattedData.map((teamData, index) => (
          <tr key={index}>
            {Object.values(teamData).map((cellInfo, index) => (
              <td key={index}>{cellInfo}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>