Как я могу отобразить данные API в определенную строку / столбец моей таблицы в React? - PullRequest
Новая
       12

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

0 голосов
/ 27 декабря 2018

Я пытаюсь создать простое веб-приложение NBA boxscore.В настоящее время мои данные API дают мне массив объектов, каждый из которых является игроком с определенной информацией.У каждого игрока есть GameID и TeamID.В настоящее время у меня есть API, сгруппированный по идентификатору команды и отображающий каждую группу игроков teamID в отдельные таблицы.Мне нужно, чтобы игроки с одинаковым идентификатором игры, но с другим идентификатором команды, находились в ТО ЖЕ таблице, но размещали ПОМЕСТНО друг от друга в таблице.Есть ли способ указать, где данные API отображаются в таблице на основе их значения (в данном случае teamID)?Я включил несколько картинок, которые довольно сложно объяснить словами.

Here is what I have rendered currently. Here is a sample of the API data.

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import _ from 'lodash';

const ScoreCards = (props) => {
  console.log("props.gameStats ", props.gameStats);
  const groupTeam = _.groupBy(props.gameStats, sorted => 
  sorted.team.id)
  const groupTeamArray = _.concat(groupTeam)
  const teamIdHome = Object.entries(groupTeam)[0]
  const teamIdAway = Object.entries(groupTeam)[1]
  console.log(groupTeamArray)
  return (
    <table>
      <tbody>
        <tr>
          <td>game ID</td>
          <td>Team ID</td>
          <td>Players</td>
          <td>FGM/A</td>
          <td>FG%</td>
          <td>FTM/A</td>
          <td>FT%</td>
          <td>3PTM</td>
          <td>PTS</td>
          <td>REB</td>
          <td>AST</td>
          <td>ST</td>
          <td>BLK</td>
          <td>TO</td>
          <td>game ID</td>
          <td>Team ID</td>
          <td>Players</td>
          <td>FGM/A</td>
          <td>FG%</td>
          <td>FTM/A</td>
          <td>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>
            <td>{gameData.team.id}</td>
            <td>{gameData.player.firstName} 
                {gameData.player.lastName}</td>
            <td>{gameData.stats.fieldGoals.fgMade} / 
                {gameData.stats.fieldGoals.fgAtt}</td>
            <td>{gameData.stats.fieldGoals.fgPct}</td>
            <td> 
                {gameData.stats.freeThrows.ftMade}
               /{gameData.stats.freeThrows.ftMade} 
           </td>
            <td>{gameData.stats.freeThrows.ftPct}</td>
            <td>{gameData.stats.fieldGoals.fg3PtMade}</td>
            <td>{gameData.stats.offense.pts}</td>
            <td>{gameData.stats.rebounds.reb}</td>
            <td>{gameData.stats.offense.ast}</td>
            <td>{gameData.stats.defense.stl}</td>
            <td>{gameData.stats.defense.blk}</td>
            <td>{gameData.stats.defense.tov}</td>
          </tr>
        </Fragment>
      );
    })}
  </tbody>
  </table>
  );
 };

export default ScoreCards;


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

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


   export default ScoreCardData;

IЯ в основном пытаюсь создать приложение NBA boxscore, где каждый стол представляет игру, а игроки в каждой команде отображаются друг против друга.Я также пытался сгруппировать свои данные API по gameID, но у меня все еще оставалась та же проблема - найти способ отделить игроков друг от друга и отобразить их на основе их teamID.

...