Как я могу представить данные API в отдельных таблицах на основе значения в React?

Question

Я пытаюсь создать простое веб-приложение NBA boxscore в React, но у меня возникают проблемы при преобразовании данных API в отдельные таблицы для каждой игры.Я пытаюсь создать отдельные таблицы с собственными заголовками для каждой игры на основе значения gameID из API.Как мне этого добиться?

import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';

const ScoreCardData = ({ gameStats }) => {
return(
    <table>
        <tbody>
        <tr>
            <td>gameID</td>
            <td>Players</td>
            <td>FGM/A FG%</td>
            <td>FTM/A FT%</td>
            <td>3PTM</td>
            <td>PTS</td>
            <td>REB</td>
            <td>AST</td>
            <td>ST</td>
            <td>BLK</td>
            <td>TO</td>
        </tr>
        {Object.keys(gameStats).map((gameData, i) => {
            return(
                <Fragment>
                    <tr key={i}>
                        <td>{gameStats[gameData].game.id}</td>
                    </tr>
                </Fragment>
                ) 
            })
        }
        </tbody>
    </table>
 )
};


export default ScoreCardData;

Вот код, в котором я пытаюсь отобразить данные API.Я могу получить список всех идентификаторов игр в одной таблице, но я хочу разделить их по значению gameID, чтобы отображать каждую таблицу как отдельную игру.Я также хочу иметь строку заголовка со всеми именами статистики, которые будут отображаться для каждой таблицы.

Я просто пытаюсь создать простой веб-сайт с оценками NBA, но у меня возникают проблемы с преобразованием данных в формат.Это мое первое веб-приложение, которое я создаю, поэтому я очень растерялся.Любая помощь будет оценена.

Увеличить

Answer 1

Пожалуйста, попробуйте вот так: если вы хотите отобразить отдельную таблицу на основе идентификатора игры, нам нужно сначала сгруппировать данные по game.id, а затем просмотреть исходные данные gameStats через Object.keys.

Демонстрационная ссылка:https://codesandbox.io/s/8yjwk4nzv2

import groupBy from "lodash.groupby";

const ScoreTable = props => {
  console.log("props.gameStats ", props.gameStats);
  return (
    <table>
      <tbody>
        <tr>
          <td>gameID</td>
          <td>Players</td>
          <td>FGM/A FG%</td>
          <td>FTM/A FT%</td>
          <td>3PTM</td>
          <td>PTS</td>
          <td>REB</td>
          <td>AST</td>
          <td>ST</td>
          <td>BLK</td>
          <td>TO</td>
        </tr>
        {props.gameStats.map((gameData, i) => {
          return (
            <Fragment>
              <tr key={i}>
                <td>{gameData.game.id}</td>
              </tr>
            </Fragment>
          );
        })}
      </tbody>
    </table>
  );
};

const ScoreCardData = props => {
  return Object.keys(props.gameStats).map((item, i) => {
    return <ScoreTable gameStats={props.gameStats[item]} />;
  });
};

const gameStats = [
  {
    game: { id: 47820 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 47820 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 5000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 5000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 6000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  }
];
const groupedData = groupBy(gameStats, "game.id");
console.log("groupedData ", groupedData);

Answer 2

Если gameStats - это массив объектов, а каждый объект - уникальная игра, вы можете визуализировать table для каждой уникальной игры, перемещая всю свою логику в функции карты.Предполагается, что вы хотите получить <table>...</table> за игру.

import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';

    const ScoreCardData = ({ gameStats }) => {
    return(
            {Object.keys(gameStats).map((gameData, i) => {
              return (
                <Fragment>
                 <table>
                  <tbody>
                   <tr>
                     <th>gameID</th>
                     <th>Players</th>
                     <th>FGM/A FG%</th>
                     <th>FTM/A FT%</th>
                     <th>3PTM</th>
                     <th>PTS</th>
                     <th>REB</th>
                     <th>AST</th>
                     <th>ST</th>
                     <th>BLK</th>
                     <th>TO</th>
                    </tr>
                    <tr key={i}>
                       <td>{gameStats[gameData].game.id}</td>
                       ...
                       <td>{gameStats[gameData].game.to}</td>
                    </tr>
                  </tbody>
                 </table>
                </Fragment>
             ) 
           })
          })
         };


    export default ScoreCardData;