Barlow96 Barlow96 -4 years ago 93
AngularJS Question

Angular 'For loop' not displaying in order

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'

'Episode name'

'Episode name'

Season 2:

'Episode name'

'Episode name'

'Episode name'... and so on

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download