Gehen Sie tiefer in meine HTTP-Anfrage wird nicht die erforderlichen Daten in der Ansicht

Question

So aufbauend auf die vorherige Frage (Http request in service successful but not able to show in view). Ich muss tiefer in meine http-Anforderung gehen, um einen API-Aufruf für einen ausgewählten Film machen, etwa so:

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

Voll Code meines Dienstes:

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

Mein Controller ist folgende:

.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 (Liste der Filme)

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

Wenn man auf eines der Filme klickt, sollte es auf die Detailseite gehen, die es tut (die ID wird in der URL angezeigt), aber ich kann nicht scheinen, Daten für diesen bestimmten Film auszulesen. Obwohl alle meine Anfrage ok sind und in meiner Konsole durchkommen.

HTML-Code für Details Seite:

<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 von der Detailseite:

Was mache ich falsch?

Answer 1

Die Nachricht "Das Versprechen wurde erfüllt" wird angezeigt, damit Sie wissen, dass die erste Anfrage in Ordnung war, aber das sagt Ihnen nichts über die Moviedetail-Aufrufe.

Sie geben eine Schleife ein, um alle "Hot Movie" -Details abzurufen. Da sich jedoch der d.resolve im Erfolgscode des ersten Anrufs befindet, wird das Versprechen gelöst, bevor Ihre Filmdetails ausgeführt werden.

Ich würde eine Reihe von Versprechen machen (von allen Detailanrufen) und $q.all(promises); verwenden, um aufzulösen, wenn alle diese Anrufe erledigt sind. So können Sie alle Ihre Daten kennen, ist in.

Eine weitere Sache ...

Sie die Antwort auf self.singleHotMovie in self.singleHotMovie = response; kopieren. Auf diese Weise wird nur der allerletzte Film-Detail-Aufruf in self.singleHotMovie aufgelöst. Möglicherweise möchten Sie stattdessen self.singleHotMovie.push(response) verwenden, um es dem Array hinzuzufügen.

ungetestet:

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