Going deeper in my http request will not show the needed data on the view

Question

So building up on the previous question (Http request in service successful but not able to show in view). I need to go deeper in my http request to make a api call for a selected movie, like so:

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 is the following:

.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 (list of movies)

<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 movies it should go to the detail page which is does (the id is shown in the url), but i can't seem to read out data for that specific movie. Although all my request are ok and coming through in my console.

HTML code for details page:

<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 of the details page:

What am I doing wrong ?

Answer 1

The message "The promise has been fulfilled" is shown, so you know the first request went ok, but that doesn't tell you anything about the moviedetail-calls.

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

I would make an array of promisses (from all the detail calls) and use $q.all(promises); to resolve when all these calls are done. That way you know all your data is in.

One more thing...

You copy the response to self.singleHotMovie in self.singleHotMovie = response;. That way, only the very last movie-details call to resolve will be in self.singleHotMovie. You might want to use self.singleHotMovie.push(response) to add it to the array instead.

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