L'approfondimento della mia richiesta http non mostrerà i dati necessari sulla vista

Question

Quindi compilando la domanda precedente (Http request in service successful but not able to show in view). Ho bisogno di andare più in profondità nella mia richiesta http per effettuare una chiamata API per un film selezionato, in questo modo:

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

codice completo del mio servizio:

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

mio controller è il seguente:

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

codice HTML (lista di film)

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

Quando si fa clic su uno dei film, dovrebbe andare alla pagina dei dettagli che viene eseguita (l'ID è mostrato nell'URL), ma non riesco a leggere i dati per quel film specifico. Anche se tutte le mie richieste sono ok e stanno arrivando nella mia console.

codice HTML per la pagina di dettagli:

<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 della pagina dei dettagli:

Che cosa sto facendo di sbagliato?

Answer 1

Viene visualizzato il messaggio "La promessa è stata soddisfatta", in modo che tu sappia che la prima richiesta è andata a buon fine, ma che non ti dice nulla delle chiamate in movimento.

Si entra in un ciclo per recuperare tutti i dettagli "hot film". Tuttavia, poiché d.resolve si trova nel codice di successo della prima chiamata, la promessa viene risolta prima che vengano effettuate le chiamate a tali dispositivi.

Vorrei creare una serie di promesse (da tutte le chiamate di dettaglio) e utilizzare $q.all(promises); per risolvere quando tutte queste chiamate sono state fatte. In questo modo si conosce tutti i vostri dati sono in.

Ancora una cosa ...

Si copia la risposta alla self.singleHotMovie in self.singleHotMovie = response;. In questo modo, solo l'ultimo messaggio di dettagli sul film sarà risolto in self.singleHotMovie. Potresti voler usare self.singleHotMovie.push(response) per aggiungerlo all'array.

non testati:

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