在导入的JSON对象中获取一个数组 - AngularJS
[英]Grab an array within imported JSON object - AngularJS
问题描述
I am building a quick Angular app that uses a service to grab a JSON from a URL. 
我正在构建一个快速Angular应用程序，它使用服务从URL获取JSON。
The JSON structure looks like this: JSON结构如下所示：
{news:[{title:"title",description:'decription'},
{title:"title",description:'decription'},
{title:"title",description:'decription'}
]};
What I need is just the array within the news object. 我需要的只是新闻对象中的数组。
My code to import the JSON is as follows: 我导入JSON的代码如下：
app.factory('getNews', ['$http', function($http) {
return $http.get('URL')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
Then to add the data to the $scope object in the controller I do this: 然后将数据添加到控制器中的$ scope对象，我这样做：
app.controller('MainController', ['$scope','getNews', function($scope, getNews) {
getNews.success(function(data)) {
$scope.newsInfo = data.news;
});
});
But it doesn't work. 但它不起作用。 When I load the html page, there is only white. 当我加载html页面时，只有白色。 My thinking is that this is because it isn't grabbing the array within the JSON and using that data to populate the HTML directive I set up. 我的想法是，这是因为它没有抓住JSON中的数组并使用该数据来填充我设置的HTML指令。
newsInfo.js: newsInfo.js：
app.directive('newsInfo',function(){
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl:'newsInfo.html'
};
});
newsInfo.html: newsInfo.html：
<h2>{{ info.title }}</h2>
<p>{{ info.published }}</p>
My HTML doc is: 我的HTML文档是：
<head>
<title></title>
<!--src for AngularJS library-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="THE APP NAME"> <!--insert ng app here-->
<div ng-controller="MainController"> <!--insert ng controller here-->
<div ng-repeat="news in newsInfo"><!--insert ng repeat here-->
<!-- directive goes here-->
<newsInfo info="news"></newsInfo>
</div>
</div>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Services -->
<script src="getNews.js"></script>
<!-- Directives -->
<script src="newsInfo.js"></script>
</body>
Thoughts? 思考？
4 个解决方案
解决方案1
2 2015-08-13 02:25:20
You haven't specified the controller. 您尚未指定控制器。
<div ng-controller="MainController"> <!--insert ng controller here-->
<div ng-repeat="news in newsInfo"><!--insert ng repeat here-->
<!-- directive goes here-->
<newsInfo info="news"></newsInfo>
</div>
</div>
解决方案2
2 2015-08-13 04:30:08
Change 更改
<newsInfo info="news"></newsInfo>
to 至
<news-info info="news"></news-info>
example: https://jsfiddle.net/bhv0zvhw/3/ 例如： https ： //jsfiddle.net/bhv0zvhw/3/
解决方案3
0 2015-08-13 04:57:16
$scope.getNews = function(){
return $http.get('URL').success(function(data) {
return data.news;
})
};
^ This, just change it so that the success function returns only the news! ^这，只需更改它，以便成功函数只返回新闻！
解决方案4
0 已采纳 2015-08-13 17:18:25
While I am answering my own question, I should point out that everyone's answers were also correct. 在回答我自己的问题时，我应该指出每个人的答案都是正确的。 The code had multiple errors, but the final error was fixed by doing the following: 代码有多个错误，但最后的错误是通过执行以下操作修复的：
Apparently I had to upload the newsInfo.html doc to an S3 bucket and use that URL as “Cross origin requests are only supported for HTTP.” But then Angular blocked that external source with the Error: "$sce:insecurl Processing of a Resource from Untrusted Source Blocked" . 显然，我必须将newsInfo.html doc上传到S3存储桶，并将该URL用作“Cross origin requests are only supported for HTTP.”但随后Angular使用错误阻止了该外部源： "$sce:insecurl Processing of a Resource from Untrusted Source Blocked" 。
So since the html template was so simple, i just bipassed this issue by typing in the template directly into the .js directive and it worked! 因此，由于html模板非常简单，我只是通过直接在.js指令中输入模板来解决这个问题，并且它有效！ thanks everyone for the help! 谢谢大家的帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.