If deeper in my HTTP request the necessary data in the view will not be displayed

Question

So building up the previous question ( Http request in the service is successful, but not able to show in kind ). I need to delve into my http request in order to make an api call for the selected movie, for example:

http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXX') 

Full code of my service:

 angular.module('starter.services', []) .service('HotMoviesService', function($http, $q){ var movieId; var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXX"; var self = { 'hotMovies' : [], 'singleHotMovie' : [], 'loadHotMovies' : function() { var d = $q.defer(); $http.get(final_url) .success(function success (data){ //console.log(data); self.hotMovies = data.results; for(var i = 0; i < self.hotMovies.length; i++){ //console.log(self.hotMovies[i].id); movieId = self.hotMovies[i].id; //console.log("Logging movie id: ", movieId); $http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXXXX') .success(function succcess(response){ //console.log("Logging response in the for loop " , response); self.singleHotMovie = response; }) .error(function error (msg){ console.log(msg); }) } d.resolve('The promise has been fulfilled'); }) .error(function error (msg){ console.error("There was an error retrieving the data " , msg); d.reject("The promise was not fulfilled"); }); return d.promise; } }; return self; }) 

My controller:

 .controller('StartCtrl', function($scope, $http, HotMoviesService) { //POPULAR $scope.hotmovies = []; HotMoviesService.loadHotMovies().then(function success (data){ console.log(data);//returns success message saying that promise is fulfilled $scope.hotmovies = HotMoviesService.singleHotMovie; }, function error (data){ console.log(data)//returns error messag saying that promise is not fulfilled }); }) 

HTML code (movie list)

 <ion-view view-title="The Movie Bank"> <ion-content class="background"> <h1 class="padding titleStart">Welcome to The Movie Bank</h1> <div class="logo"></div> <!-- HOT --> <a class="customHref" href="#/app/hot"> <h1 class="padding customH1">Hot</h1> </a> <hscroller> <ion-scroll direction="x" scrollbar-x="false"> <hcard ng-repeat="hotmovie in hotmovies"> <a href="#/app/hot/{{hotmovie.id}}"> <img ng-src="http://image.tmdb.org/t/p/w92/{{hotmovie.poster_path}}" > </a> </hcard> </ion-scroll> </hscroller> </ion-content> </ion-view> 

When clicking on one of the videos, he should go to the details page, which is (the identifier is shown in the URL), but I can not read the data for this particular movie. Although all my requests are in order and go through the console.

HTML code for details:

 <ion-view view-title="Hot Detail"> <ion-content > <h1>test</h1> <h4>{{original_title}}</h4> <img ng-src="http://image.tmdb.org/t/p/w92/{{hotMovie.poster_path}}" > </ion-content> </ion-view> 

Screenshot from the detail page:

What am I doing wrong?

Answer 1

A “Promise Fulfilled” message appears, so you know that the first request went fine, but that says nothing about moviedetail calls.

You enter a loop to get all the details of a hot movie. However, since d.resolve is in the success code of the first call, the promise is resolved before your moviedetails calls are made.

I would make an array of promisses (from all the detailed calls) and use $q.all(promises); to decide when all these calls are completed. This way you know that all of your data is located.

One more thing ...

You copy the response to self.singleHotMovie to self.singleHotMovie = response; . Thus, only the most recent movie call to be addressed will be in self.singleHotMovie. You might want to use self.singleHotMovie.push(response) to add it to the array.

untested:

 'loadHotMovies' : function() { var d = $q.defer(); $http.get(final_url) .success(function success (data){ //console.log(data); self.hotMovies = data.results; // create an array to hold the prommisses var promisses = []; for(var i = 0; i < self.hotMovies.length; i++){ //console.log(self.hotMovies[i].id); movieId = self.hotMovies[i].id; //console.log("Logging movie id: ", movieId); var promise = $http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXXXX') .success(function succcess(response){ //console.log("Logging response in the for loop " , response); self.singleHotMovie = response; }) .error(function error (msg){ console.log(msg); }); // add all the detail calls to the promise array promisses.push(promise); } //when all the details calls are resolved, resolve the parent promise $q.all(promisses).finally(function(){ d.resolve('The promise has been fulfilled'); }); }) .error(function error (msg){ console.error("There was an error retrieving the data " , msg); d.reject("The promise was not fulfilled"); }); return d.promise; }