从复杂的 JSON 迭代到表中答案

【问题标题】：Iterating Into a Table from a complex JSON从复杂的 JSON 迭代到表中
【发布时间】：2020-12-07 09:36:57
【问题描述】：

我正在努力使用 JavaScript 中的可选链接将 JSON 对象映射到 React 中的 Table。这是有效载荷：

{
    "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 市场。这是我针对该场景的解决方案，我将直接过滤 Winner 并遍历表格：

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>
)

然而，现在Finish Last 市场刚刚被添加到markets 数组中。我还计划在未来增加更多的市场。我希望表头看起来像这样：

            <thead>
              <tr className="same-col-widths">
                <th>Team Name</th>
                <th>Winner</th>
                <th>Finish Last</th>
            </thead>

在一列中包含团队名称，以及在相关列中对应于正确市场的所有概率。这样做的最佳方法是什么？

【问题讨论】：

您在该数据 json 中有“获胜者”和“最后完成”的概率，您打算如何将其转换为表格的“获胜者”和“前两名完成”？
啊，错字。它旨在代表我将添加的未来对象。我已将“前两个完成”更正为“最后完成”

标签： javascript json reactjs react-bootstrap optional-chaining

【解决方案1】：

首先您要使用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>

看到它在这个Code Sandbox中工作

【讨论】：