Iterating Into a Table from a complex JSON

Question

I am struggling with optional chaining in JavaScript to map a JSON object to a Table in React. This is the payload:

{
    "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"
                    }
                ]
            }
        ]
    }
}

Previously, there was only one object in the markets array, which is the Winner market. This was my solution for that scenario, where I would filter for the Winner straightaway and iterate through the table:

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

However, now there the Finish Last market has just been added in the markets array. I also plan to add more markets in the future. I would like the table head to look something like this:

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

With the team names in one column, and all the probabilities corresponding to the correct market in the relevant columns. What is the best way to go about doing this?

You have the probabilities in that data json for "Winner" and "Finish Last, how are you planning on converting that to the "Winner" and "Top Two Finish" for the table? — Luke Storry, Aug 18 '20 at 08:27
Argh, typo. It was meant to represent future objects that I would add in. I've corrected "Top Two Finish" to "Finish Last" — clattenburg cake, Aug 18 '20 at 08:28

Luke Storry · Accepted Answer · 2020-08-18T09:26:39.913

So first of all you want to reformat the input data using a reduce, to collect all the data for each team (each row in the table) so you can more easily map through those when creating the table. Splitting out this logic from the table-creation also makes you more resilient if that input format changes in the future.

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

This gives you it in the more table-friendly format of:

[
    { "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" },
]

And then you can use this new object's keys to map and get the list of table headers, and then map through each object's values to create the rows.

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

See it working in this Code Sandbox

Iterating Into a Table from a complex JSON

1 Answers1