Angular 'For loop' not displaying in order

Question

Calling data from an api in 'AngularJS' and using a for loop inside a for loop to go through. The result i'm expecting in the console is:

'Season Number' 'Episode Name' 'Episode Name'

'Season Number' 'Episode Name' 'Episode Name'....

However the result that is outputted on Google Chrome console is

'Season Number' 'Season Number' 'Season Number'

Then all of the episode names.

May be looking at it wrong or missing something with my loops. But its really bugging me. Any help would be appreciated

    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);
          }

        })
    }

EDIT: Using AngularJS to display the results on a HTML page. Ideally what i'm trying to do is display:

Season 1:

'Episode name'

Season 2:

'Episode name'

'Episode name'... and so on

The url needs to change each time to bring up the episodes for each season.

related/dupe http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — rlemon, Mar 23 '17 at 19:34
What's the data in `seasondetails` and `tvID` so we can actually test solutions? — Linek, Mar 23 '17 at 20:08

Nikolaj Dam Larsen · Accepted Answer · 2017-03-23T20:32:53.313

The inner loop is called asynchronously - so it doesn't execute until the http get request is resolved. The $http.get function doesn't wait for the request to finish. It just continues with the loop. That is why all the console.log(season_number); messages shows up first and the console.log(response.data.episodes[ii].name) follows (in a non-deterministic order as well).

Update

Without knowing exactly how you want the data represented, I'll attempt to give you an example you can build upon.

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);
    });
});

Then in your view:

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

I decided to use $q.all so that we wait for all the seasons to be retrieved before adding the data to the $scope. It also has the neat feature that the responses are returned in the same order as the promises in the array.

Update 2

Added a plunker with a working example

Note: You should probably replace your API key after this

That wont work since the `season_number` is bound to the outer scope, thus the last assigned `season_number` would show up in every call to `console.log(season_number);` inside .then() — Nikolaj Dam Larsen, Mar 23 '17 at 19:52

Angular 'For loop' not displaying in order

1 Answers1

Update

Update 2