React Streaming Through Json Чтобы найти совпадение: .find не является функцией

Question

Я привык к функциональному программированию на Java и недавно пробовал свои силы на JS. Я пытаюсь передать поток через Json вывод, который выглядит следующим образом:

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

Я пытаюсь отобразить рыночные вероятности Winner с name команд в таблицу bootstrap . Это означает, что мне нужно перебирать вывод JSON, пока я не совпаду с именем Winner, а затем перебирать этот отфильтрованный объект.

Однако мне неизвестен эквивалент Javascript функции stream в Java. Я немного знаю о цепочке опций. Это была моя попытка, используя 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>
  );
}

К сожалению, это ошибка, которую я получил:

TypeError: _api_model_simulationResult__WEBPACK_IMPORTED_MODULE_2__.find is not a function

Что мне нужно сделать для рендеринга этот стол?

Answer 1

Нельзя использовать find на объекте JSON, это должно быть array.

Вы можете сделать что-то вроде этого:

// simulationResult is JSON

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

simulationResult.markets.find()

Answer 2

Предполагая, что опубликованный вами объект simulationResult, ваш JSX будет выглядеть так:

simulationResult
.markets
.find(t => t.name === "Winner")
.selections.map(selection => (
  <tr key="">
    <td>{selection.name}</td>
    <td>{selection.probability}</td>
  </tr>
))