How can I render API data into separate tables based on the value in React?

Question

I'm trying to create a simple NBA boxscore web app in React, but I am having trouble rendering the API data into separated tables for each game. I am trying to create separate tables with its own headers for each game based on the gameID value from the API. How can I achieve this?

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;

Here is the code where I try to render the API data. I'm able to get a list of all the game ID's in one table, but I want to separate them according to gameID value so that I can display each table as a separate game. I also want to have the header row with all the stat names to be displayed for each table.

I'm basically just trying to create a simple NBA box score website, but I am having trouble actually rendering the data into a box score format. This is my first web application that I am creating, so I am very lost. Any help would be appreciated.

Fullsize Image

Answer 1

Please try like this, if want to display separate table based on game id, we need to group the data first by game.id then loop through original gameStats data via Object.keys.

Demo link: 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

If gameStats is an array of objects, and each object is a unique game, you can render a table per unique game by moving all of your logic within the map function. This is assuming you want an actual <table>...</table> per game.

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;