因此,在上一个问题 ( 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 如下:
.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>
详情页截图:
我究竟做错了什么 ?
最佳答案
显示消息“ promise 已实现”,因此您知道第一个请求成功,但这并没有告诉您有关电影细节调用的任何信息。
您进入一个循环以检索所有“热门电影”详细信息。但是,由于d.resolve
在第一次调用的成功代码中, promise 在您的 moviedetails 调用完成之前得到解决。
我会做出一系列 promise (来自所有细节调用)并使用 $q.all(promises);
完成所有这些调用后解决。这样你就知道你的所有数据都在里面。
还有一件事...
您将响应复制到 self.singleHotMovie 中 self.singleHotMovie = response;
.
这样,只有最后一个要解决的电影详细信息调用才会在 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;
}
关于angularjs - 深入了解我的 http 请求将不会在 View 上显示所需的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33153448/