Question

我想知道底部循环的问题是什么，或者当我尝试将其记录到控制台时，我是否以某种方式错过了最后一个json错误。数组在给定代码之上，前两个循环工作正常。我试图回归目标，但现实是我想找到一种有效的方式来返回所有统计数据。

data.barData = barChartData

Answer 1

您的最终循环可能是在从API返回HTTP调用的同时尝试初始化/运行。由于您使用回调来获取详细信息而不是承诺，因此您需要以回调形式执行此操作。如果没有你真正向我展示完整的代码，这是我能做的最好的事情：

d3.json('https://statsapi.web.nhl.com/api/v1/teams', function(teamResponse) {
  var teamIds = teamResponse.teams.filter((team, i) => i < 31)
    .map((team) => team.id);

  // I use the functional approach above because I think it is cleaner than loops.
  // for (i=0; i < 31; i++) {
  //    teamID.push(data.teams[i].id);
  //}

  d3.json('https://statsapi.web.nhl.com/api/v1/teams/1/?expand=team.roster', function(rosterResponse) {
    var playerIdList = rosterResponse.teams[0].roster.roster
      .map((roster) => roster.person.id);

    // Swap this out for the functional method above.
    //for (i=0; i < data.teams[0].roster.roster.length; i++) {
    //  playerList.push(data.teams[0].roster.roster[i].person.id);
    //}

    for(var i = 0; i < playerIdList; i++) {
      d3.json('https://statsapi.web.nhl.com/api/v1/people/' + playerIdList[i] + '/stats/?stats=statsSingleSeason&season=20172018', function(data) {
        console.log(data.stats[0].splits[0].stat.goals);
      });
    }
  });
});

Answer 2

Promise（Promise.all）是Internet Explorer中的not supported at all（它们位于Edge中）和其他浏览器的某些旧版本。这些浏览器也不支持箭头功能。

我认为当您需要支持旧浏览器时，您可以使用babel（使用webpack）或知道如何编写ES5。

d3.json返回一个promise，这样你就可以省略回调并使用promises：

Promise.all([
  d3.json('https://statsapi.web.nhl.com/api/v1/teams'),
  d3.json('https://statsapi.web.nhl.com/api/v1/teams/1/?expand=team.roster')  
])
.then(
  ([teams,playerData])=>{
    const playerList = playerData.teams[0].roster.roster.map(
      player=>player.id
    );
    return Promise.all(
      playerList.map(
        playerID=>
          d3.json(`https://statsapi.web.nhl.com/api/v1/people/${playerID}/stats/?stats=statsSingleSeason&season=20172018`)
      )
    ).then(
      (playerStats)=>[teams,playerData,playerStats]
    )
  }
)
.then(
  ([teams,playerData,playerStats])=>{
    console.log("teams:",teams);
    console.log("playerData:",playerData);
    console.log("playerStats:",playerStats);
  }
)
.catch(
  err=>console.warn("Something went wrong:",err)
);

我没有评论代码是如何工作的，所以如果您对代码有任何具体问题，请告诉我。如果您不知道为何使用承诺，我建议您阅读this。谷歌＆＃34; mdn承诺所有＆＃34;在询问所有人的承诺之前。

在javascript中使用json循环问题

2 个答案: