React Streaming Through Json To Find Match: .find is not a function

Question

I'm used to functional programming in Java and have just been trying my hand at JS recently. I am trying to stream through a Json output that looks like this:

{
    "originatingRequest": {
        "clientId": 1,
        "simulationName": "Season 2020",
        "teamRatings": [{
                "teamId": 1,
                "rating": 2.5
            },
            {
                "teamId": 2,
                "rating": 0.85
            },
            {
                "teamId": 3,
                "rating": 1.35
            },
            {
                "teamId": 4,
                "rating": 1.35
            }
        ],
        "simulationId": "7d49cb14-d99e-4315-bba3-077d114ab6fc"
    },
    "markets": [{
            "name": "Winner",
            "selections": [{
                    "name": "Manchester City",
                    "probability": "0.25"
                },
                {
                    "name": "Manchester United",
                    "probability": "0.25"
                },
                {
                    "name": "Liverpool",
                    "probability": "0.25"
                },
                {
                    "name": "Chelsea",
                    "probability": "0.25"
                }
            ]
        },
        {
            "name": "Top Two",
            "selections": [{
                    "name": "Manchester City",
                    "probability": "0.95"
                },
                {
                    "name": "Manchester United",
                    "probability": "0.05"
                },
                {
                    "name": "Liverpool",
                    "probability": "0.95"
                },
                {
                    "name": "Chelsea",
                    "probability": "0.05"
                }
            ]
        }
    ],
    "created": "2020-05-27T11:12:43.467644"
}

I am trying to render the Winner market probabilities with the name of the teams into a bootstrap table. So this means I have to iterate through the JSON output until I match the name Winner and then iterate through that filtered object.

However, I'm not aware of the Javascript equivalent of the stream function in Java. I do know a bit about option chaining. This was my attempt, using find:

function SimulationReport() {
  return (
    <Table>
      <thead>
        <th>Team Name</th>
        <th>Win Probability</th>
      </thead>
      <tbody>
        {simulationResult
          .find(t => t.originatingRequest.markets.name === "Winner")
          .selections.map(selection => (
            <tr key="">
              <td>{selection.name}</td>
              <td>{selection.probability}</td>
            </tr>
          ))}
      </tbody>
    </Table>
  );
}

Unfortunately this is the error I got:

TypeError: _api_model_simulationResult__WEBPACK_IMPORTED_MODULE_2__.find is not a function

What do I have to do to render this table?

Answer 1

You can't use find on JSON object, it should be array.

You can do something like this :

// simulationResult is JSON

// simulationResult.markets is array, so you can use find on it

simulationResult.markets.find()