AngularJS 从 json 获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25080331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS get data from json
提问by Erdal Bakkal
I'm trying to get from Json data but it doesn't worked for me. I'm not sure what I'm doing wrong.
我试图从 Json 数据中获取，但它对我不起作用。我不确定我做错了什么。
Angular Ajax API call :
Angular Ajax API 调用：
<script>
function PostsCtrlAjax($scope, $http) {
$http({
method: 'POST',
url: 'js/posts.json'
}).success(function(data) {
$scope.posts = data.deals;; // response data
});
}
</script>
HTML Data Binding
HTML 数据绑定
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts">
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}}</div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
Posts.json:
帖子.json：
{
"result":"SUCCESS",
"resultMessage":"",
"deals":[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"https://lh5.googleusercontent.com/-VWIAbbjR1QM/Uf_v9v9LCbI/AAAAAAAAIAo/4ZhYhP3lcCg/s550/multiple.jpg",
"description":"Today I am presenting the most important social networking feature called multiple ajax image upload without refreshing the page using jquery and PHP. We just modified few lines of code in jqery.form.js plugin and renamed that to jquery.wallform.js. This feature is one of the key feature in Wall Script sale, big thanks to Arun Sekar for this code trick.",
"time":"Tuesday, August 6, 2013",
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"https://lh5.googleusercontent.com/-ErPa0tEQgLs/UfZzaQ3NcFI/AAAAAAAAH7o/h_KH8Rf4AXs/s550/WallBanner.jpg",
"description":"Introducing the brand new Wall Script 6.0 with enrich social network features. Exactly year later I did released Wall Script previous version, it got awesome response and outstanding sale. This script IDEA was came out from my imagination, introducing powerful features like Conversations, OEmebd URL expanding system, Like/Share and Multiple image slider.",
"time":"MONDAY, JULY 29, 2013",
"author":"Srinivas Tamada"
}
],
"total":1207
}
I want get from json file title, url, banner etc. But I didn't get any data from my json file. How can i do that?
我想从 json 文件标题、url、横幅等中获取。但我没有从我的 json 文件中获取任何数据。我怎样才能做到这一点？
回答by Brett
Your JSON isn't the same as the tutorial, so, you shouldn't expect the code to work. You need to change it. Did you try this?
您的 JSON 与教程不同，因此，您不应期望代码能够正常工作。你需要改变它。你试过这个吗？
<script>
function PostsCtrlAjax($scope, $http) {
$http({method: 'POST', url: 'js/posts.json'}).success(function(data) {
$scope.posts = data.deals; // response data
});
}
</script>
回答by Brett
<script>
function PostsCtrlAjax($scope, $http) {
$http({method: 'POST', url: 'js/posts.json', dataType:"json", contentType:"application/json; charset=utf-8"}).then(function successCallback(data) {
$scope.posts = data.data.deals; // response data
});
}
</script>
回答by Tommy Brunn
Your JSON is not valid. You have a trailing comma after the value of the buyDealUrlproperty for each member of deals. You also have a trailing comma after the last dealsobject. Since we haven't seen your code, it's impossible to know if those are the only reasons that it's not working, but that could certainly be it.
您的 JSON 无效。的buyDealUrl每个成员的属性值后面都有一个尾随逗号deals。最后一个deals对象后还有一个尾随逗号。由于我们还没有看到您的代码，因此无法知道这些是否是它不起作用的唯一原因，但肯定是这样。
Removing those commas gives you this, valid JSON:
删除这些逗号为您提供了这个有效的 JSON：
{
"result": "SUCCESS",
"resultMessage": "",
"deals": [
{
"id": "1001878",
"title": "Cotton candy muffin danish applicake. Pie jujubes icing sesame snaps marshmallow tart. ",
"description": "Halvah candy canes chupa chups toffee dessert jujubes wafer pie marshmallow.",
"howToUse": null,
"city": "",
"provider": "Yelp",
"realPriceWithSymbol": "530 EURO",
"dealPriceWithSymbol": "199 EURO",
"buyDealUrl": "http://www.example.com.com/satin-al/1001878/"
},
{
"id": "100343",
"title": "Cotton candy muffin danish applicake. Pie jujubes icing sesame snaps marshmallow tart. ",
"description": "Halvah candy canes chupa chups toffee dessert jujubes wafer pie marshmallow.",
"howToUse": null,
"city": "",
"provider": "Yelp",
"realPriceWithSymbol": "530 EURO",
"dealPriceWithSymbol": "199 EURO",
"buyDealUrl": "http://www.example.com.com/satin-al/100343"
}
],
"total": 1207
}
