如何将特定信息从外部 API 获取到我的 ng-repeat
How can I get specific information from an external api to my ng-repeat
main.html
<div class="row" ng-repeat="post in myBlogPosts.slice().reverse()">
<br>
<div class="col-md-9 text-center">
<a href="#/blog-post/{{post._id}}">
<div class="thumbnail mTextBg customShadow">
<br>
<img class="img-responsive" src="http://placekitten.com/700/400" alt="">
<div class="caption">
<h3>{{post.imdbId}}</h3>
<p>{{post.blogContent}}</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
// I WANT THIS PART !!
<div class="well sideBars customShadow">
<img class="img-responsive" ng-src="{{film.Poster}}" title="{{film.Title}}">
<h4 class="text-center">{{film.Title}}</h4>
<p class="text-center" style="margin-bottom: 2px;"><b>Year:</b> {{film.Year}}</p>
<p class="text-center"><span class="customMargin">Runtime: {{film.Runtime}}</span></p>
<p class="text-center"><span class="customMargin">Director: {{film.Director}}</span></p>
<p class="text-center"><span class="customMargin">Writer: {{film.Writer}}</span></p>
<p class="text-center"><span class="customMargin">Actors: {{film.Actors}}</span></p>
</div>
</div>
</div>
这是我的主要内容的一部分.html.在 h3 和 p 标签中,我从我的数据库中获取 imdbId 和 blogContent 并将其放入 ng-repeat 中,以便遍历列表中的博客文章。我希望能够为myBlogPost中的每篇文章获取其他信息(在//下,我想要这部分(。
主控制器.js
var refresh = function() {
$http.get('/myDatabase').success(function(response) {
$scope.myBlogPosts = response;
});
};
refresh();
此部分在页面加载时按预期工作。
我也需要在主控制器中使用这些部件;
var onGetFilmData = function (data) {
$scope.film = data;
};
var onError = function (reason) {
$scope.error = reason;
};
imdb.getImdbInfo(-- need Id --).then(onGetFilmData, onError);
但是我需要以某种方式放置每个帖子 id,以便从 Imdb api 获取特定数据。
IMDB.js
(function(){
var imdb = function($http){
var getImdbInfo = function (id) {
return $http.get('http://www.omdbapi.com/?i=' + id + '&plot=short&r=json')
.then(function(response){
return response.data;
});
};
return{
getImdbInfo: getImdbInfo
};
};
var module = angular.module('myApp');
module.factory('imdb', imdb);
})();
如果我删除id部分并在getImdbInfo函数中放置一个特定的id字符串,则所有帖子都在main中.html只填写一个电影信息。我想在我的数据库中获取每部电影的这些数据(我在数据库中保存了每部电影的 imdb id(。
主控制器
var jsonObj = {};
var refresh = function() {
$http.get('/myDatabase').success(function(response) {
jsonObj = response;
for(var i = 0; i < jsonObj.length ; i++){
jsonObj[i].title = '';
}
for(var i = 0; i < jsonObj.length ; i++){
(function(i) {
imdb.getImdbInfo(jsonObj[i].imdbId).then(function (data) {
jsonObj[i].title = data.Title;
});
})(i);
}
$scope.myBlogPosts = jsonObj;
});
};
refresh();
主.html
<div class="row" ng-repeat="post in myBlogPosts.slice().reverse()">
<br>
<div class="col-md-9 text-center">
<a href="#/blog-post/{{post._id}}">
<div class="thumbnail mTextBg customShadow">
<br>
<img class="img-responsive" src="http://placekitten.com/700/400" alt="">
<div class="caption">
<h3>{{post.imdbId}}</h3>
<p>{{post.blogContent}}</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<!-- Side Widget Well -->
<div class="well sideBars customShadow">
<h4 class="text-center">{{post.title}}</h4>
</div>
</div>
</div>
我解决了将来自 Imdb 的响应添加到来自数据库的 json 对象的问题。所以我可以轻松地在 ng-repeat 中使用它们。
相关文章:
- JavaScript嵌套获取API
- 获取 API 响应对象并替换(映射)所有键
- 是否可以覆盖本机获取 API 以使用所需的承诺库而不是本机浏览器承诺
- 成功获取 API,但没有响应
- Javascript获取api:Can't检索某些响应标头
- javascript中获取api中的Url查询字符串
- 如果我想要的URL在API中,如何获取API的URL's的JSON
- 在jQuery中简单地获取API调用
- 获取API时带有html5mode的ExpressJS无法工作
- angular试图从一个不存在的源中获取api检查
- 如何在获取 API 中处理 HTTP 代码 4xx 响应
- 获取API回调的参数
- 使用请求获取API结果,并集成到Hubot响应中
- 获取API -跨域
- 关于从DS获取api数据.RESTAdapter到模型中
- 获取api - get json主体在then和catch块为单独的状态码
- fotorama:can't获取API对象(未定义)
- 获取API返回状态代码0,需要XML响应
- 使用javascript获取api来执行POST请求
- 可以't获取API响应的特定元素[JS]