Question

从'AngularJS'中的api调用数据并在for循环中使用for循环来完成。我在控制台中期待的结果是：

'季节数' '剧集名称' '剧集名称'

'季节数' '剧集名称' '剧集名称'....

然而，在Google Chrome控制台上输出的结果是

'季节数''季节数''季节数'

然后是所有的剧集名称。

可能看错了或错过了我的循环。但它确实让我烦恼。任何帮助将不胜感激

    var season_number = 0;
    tvSeasonDetails = seasondetails;
    console.log(tvSeasonDetails);

    for (var i = 0; i < tvSeasonDetails.length; i++) {
      season_number = tvSeasonDetails[i].season_number;
      console.log(season_number);
      var url = 'https://api.themoviedb.org/3/tv/' + tvID + '/season/' + season_number + '?api_key=7baae7b093159f1876fbe91176adcb32'; // generating the url
      $http({
          method: 'GET',
          url: url

        })
        .then(function(response) {
          for (var ii = 0; ii < response.data.episodes.length; ii++) {
            console.log(response.data.episodes[ii].name);
          }

        })
    }

编辑：使用AngularJS在HTML页面上显示结果。理想情况下，我要做的是显示：

第1季：

'剧集名称'

第2季：

'剧集名称'

'剧集名称'......等等

网址需要每次都更改以显示每个季节的剧集。

Answer 1

内部循环是异步调用的 - 因此在解析http get请求之前它不会执行。 $http.get函数不会等待请求完成。它只是继续循环。这就是为什么所有console.log(season_number);消息首先显示，console.log(response.data.episodes[ii].name)跟随（以非确定性顺序）。

更新

如果不确切知道您希望数据的表示方式，我将尝试为您提供一个可以构建的示例。

tvSeasonDetails = seasondetails;

var promises = {};
angular.forEach(tvSeasonDetails, function(tvSeason){
    promises[tvSeason.season_number] = $http.get('https://api.themoviedb.org/3/tv/' + tvID + '/season/' + tvSeason.season_number + '?api_key=7baae7b093159f1876fbe91176adcb32');
});

$scope.episodeData = [];
$q.all(promises).then(function(episodesBySeasonNumber){
    angular.forEach(episodesBySeasonNumber, function(response){
        // You should replace this, with whichever method you want to save your data to the scope.
        $scope.episodeData.push(response.data);
    });
});

然后在你看来：

<ul>
    <li ng-repeat="season in episodeData">{{season.name}}
        <ul>
            <li ng-repeat="episode in season.episodes">{{episode.name}}</li>
        </ul>
    </li>
<ul>

我决定使用$q.all，以便在将数据添加到$ scope之前等待检索所有季节。它还有一个简洁的功能，即响应的返回顺序与数组中的promise相同。

更新2

添加了plunker with a working example

注意：您应该在此

之后替换您的API密钥

Angular'For循环'没有按顺序显示

1 个答案:

更新

更新2