2

我正在努力使用 JavaScript 中的可选链接将 JSON 对象映射到Tablein 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市场。这是我针对该场景的解决方案，我将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>

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

4

1 回答 1

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>

看到它在这个代码沙箱中工作

于 2020-08-18T09:06:52.200 回答