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.

Here is the sample API data that I'm trying to render Fullsize Image

Your first set of <td> tags with header names should be <th> tags because you are trying to render headers, not data. developer.mozilla.org/en-US/docs/Learn/HTML/Tables/… — dev
– dev, Commented Dec 22, 2018 at 15:53

Raja Jaganathan · Accepted Answer · 2018-12-22 16:16:39Z

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

dev · Accepted Answer · 2018-12-22 16:06:07Z

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;

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related