Question

练习我的反应和JavaScript以构建足球应用

在该组件中，我可以将每个对象从api依次映射到另一个对象，但是我想在其中插入额外的一行，或者当它是新一轮的夹具时开始一个新的div

（请参见results [key] .round映射出对象）

，每个将包含“ Regular Season-38”（依此类推）。

我尝试使用for循环，但无法将其插入ResultsTable并让地图继续

这是我的数据

const results = {
    340: { round: "Regular Season - 34", awayTeam: "Arsenal", statusShort: 'FT',...etc}
    341: { round: "Regular Season - 34", awayTeam: "Liverpool", statusShort: 'FT',...etc}
    342: { round: "Regular Season - 34", awayTeam: "Man City", statusShort: 'FT',...etc}
    343: { round: "Regular Season - 35", awayTeam: "Arsenal", statusShort: 'FT',...etc}
}

这就是方法

 render(){

let results = Object.keys(this.props.league_fixtures)
    .filter( key => this.props.league_fixtures[key]
    .statusShort !== 'NS' )
    .reduce( (res, key) => (res[key] = this.props.league_fixtures[key], res), {} );

const ResultsTable = Object.keys(results).map((key) =>

 <tr key={results[key].fixture_id}>
    <td id={results[key].homeTeam_id}>{results[key].homeTeam}</td>
    <td onClick={ e => this.props.getFixture(results[key].fixture_id, results[key].league_id) }>{results[key].final_score}</td>
    <td id={results[key].awayTeam_id}>{results[key].awayTeam}</td>
 </tr>

)


return(
  <table>
   <thead>
    <tr>
     <th> Home </th>
     <th> x </th>
     <th> Away </th>
    </tr>
   </thead>
   <tbody>
    {ResultsTable}
   </tbody>
  </table>
)
}

我希望它看起来像这样

第38轮

灯具
灯具
灯具

第37轮

装置
灯具
灯具

等

Answer 1

使用lodash groupBy函数将数组转换为具有所有键的对象的最佳方法IMO是round

我认为您的数据将如下所示：

const data = [
  {
    awayTeam: "Arsenal",
    awayTeam_id: "2",
    elapsed: "0",
    event_date: "2019-04-15T19:00:00+00:00",
    event_timestamp: "1555354800",
    final_score: "0 - 1",
    firstHalfStart: "1555354800",
    fixture_id: "fixture_id1",
    goalsAwayTeam: "1",
    goalsHomeTeam: "0",
    halftime_score: "0-1",
    homeTeam: "Watford",
    homeTeam_id: "18",
    league_id: "2",
    penalty: "-",
    round: "Regular Season - 33",
    secondHalfStart: "1555358400",
    status: "Match Finished",
    statusShort: "FT"
  },
  {
    awayTeam: "Arsenal",
    awayTeam_id: "2",
    elapsed: "0",
    event_date: "2019-04-15T19:00:00+00:00",
    event_timestamp: "1555354800",
    final_score: "0 - 1",
    firstHalfStart: "1555354800",
    fixture_id: "fixture_id2",
    goalsAwayTeam: "1",
    goalsHomeTeam: "0",
    halftime_score: "0-1",
    homeTeam: "Watford",
    homeTeam_id: "18",
    league_id: "2",
    penalty: "-",
    round: "Regular Season - 34",
    secondHalfStart: "1555358400",
    status: "Match Finished",
    statusShort: "FT"
  },
  {
    awayTeam: "Arsenal",
    awayTeam_id: "2",
    elapsed: "0",
    event_date: "2019-04-15T19:00:00+00:00",
    event_timestamp: "1555354800",
    final_score: "0 - 1",
    firstHalfStart: "1555354800",
    fixture_id: "fixture_id3",
    goalsAwayTeam: "1",
    goalsHomeTeam: "0",
    halftime_score: "0-1",
    homeTeam: "Watford",
    homeTeam_id: "18",
    league_id: "2",
    penalty: "-",
    round: "Regular Season - 35",
    secondHalfStart: "1555358400",
    status: "Match Finished",
    statusShort: "FT"
  }
 ]

使用lodash groupBy

const groupedData = _.groupBy(data, 'round'); // _ is community standard for lodash object

您将获得如下所示的对象：

{
  'Regular Season - 33': [{...}, {...}] // Array objects with round is 33
  'Regular Season - 34': [{...}, {...}] // Array objects with round is 34
  'Regular Season - 35': [{...}, {...}] // Array objects with round is 35
}

然后，您将遍历groupedData和Object.keys(groupedData)进行渲染

const keys = Object.keys(groupedData);

return (
  <div>
    {keys.map(key => (
      <ul>
        <p>{key}</p>
        {groupedData[key].map(data => (
          <li>{data.fixture_id}</li>
        ))}
      </ul>
    ))}
  </div>
)

我的渲染功能没有按照您想要的方式渲染表，但是您知道了。希望有帮助。

如何通过对象映射，但基于对象属性分为几部分？

1 个答案: