要在我的http請求更深不會顯示在視圖

Question

因此建立在先前的問題（Http request in service successful but not able to show in view）所需要的數據。我需要更進一步在我的http請求做出API調用一個選擇的電影，像這樣：

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

我服務的全碼：

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

我的控制器如下：

.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代碼（電影列表）

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

當電影就應該去哪個是做（的ID顯示在URL）的詳細信息頁面的一個點擊，但我似乎無法讀出的數據進行特定的電影。雖然我所有的要求都可以通過我的控制檯進行。有關詳細信息頁面

HTML代碼：詳細信息頁面的

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

截圖：

我在做什麼錯？

Answer 1

「的承諾已履行完畢」的消息顯示，讓你知道的第一個請求就ok了，但是，這並不告訴你關於moviedetail通話東西。

你進入一個循環，以取回所有的「熱電影」的詳細信息。但是，由於d.resolve位於第一個調用的成功代碼中，因此在您的moviedetails調用完成之前，promise會被解析。

我會做promisses數組（從所有的細節呼叫），並使用$q.all(promises);當所有這些調用完成後才能解決。你知道你所有的數據的方式是。

一件事...

您複製self.singleHotMovie = response;到self.singleHotMovie響應。 這樣一來，只有最後一個電影細節的調用纔會在self.singleHotMovie中解決。您可能想使用self.singleHotMovie.push(response)將其添加到數組中。

未經測試：

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