javascript - Angular 'For loop' 未按顺序显示

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 季:

'剧集名称'

'剧集名称'

'剧集名称'...等等

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

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 key