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.

What's the data in seasondetails and tvID so we can actually test solutions? — Linek
– Linek, Commented Mar 23, 2017 at 20:08

Nikolaj Dam Larsen · Accepted Answer · 2017-03-23 20:32:53Z

1

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

edited Mar 23, 2017 at 20:32

answered Mar 23, 2017 at 19:40

Nikolaj Dam Larsen

5,7246 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kumar Nitesh Over a year ago

Move console.log(season_number); inside .then()

Nikolaj Dam Larsen Over a year ago

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()

Barlow96 Over a year ago

Thank you, Exactly what i was looking for

Collectives™ on Stack Overflow

Angular 'For loop' not displaying in order

1 Answer 1

Update

Update 2

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Update 2

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related