AngularJs : json解析
AngularJs : json解析
提问于 2016-06-07 11:04:49
我试图解析一个Json文件并使用angularjs在网络上显示照片。但是Json的数据并没有被解析。
这是我的js：
var myApp = angular.module('demoApp', ['angularGrid']);
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
myApp.service('imageService',['$q','$http',function($q,$http,$scope){
this.loadImages = function(){
return $http.get("https://gist.githubusercontent.com/vedant1811/ebc4effaeeb2d4524460164a3524d003/raw/ecfa9855867c1b51dad52936cfe4b83a3447ea7a/example_model_response.json");
};
}])
.controller('demo', ['$scope','imageService', 'angularGridInstance', function ($scope,imageService,angularGridInstance) {
imageService.loadImages().then(function(data){
data.photos.forEach(function(obj){
var desc = obj.description,
width = desc.match(/width="(.*?)"/)[1],
height = desc.match(/height="(.*?)"/)[1];
obj.actualHeight = height;
obj.actualWidth = width;
});
$scope.pics = data.photos;
});;
}]);以下是我的Json文件的一部分：
{
"id": 10,
"name": "username",
"location": "locationname",
"sex": "female",
"height": 134,
"bio": "Actress and Model",
"photos": [
{
"id": 113,
"description": "",
"width": 184,
"height": 274,
"position": null,
"icon": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/icon/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"medium": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/medium/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"large": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/large/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"xlarge": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/xlarge/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525"
},
{
"id": 112,
"description": "",
"width": 160,
"height": 200,
"position": null,
"icon": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/icon/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"medium": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/medium/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"large": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/large/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"xlarge": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/xlarge/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626"
}, 这是我的HTml身体：
<body class="" data-ng-controller="demo">
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
<li data-ng-repeat="pic in pics" class="grid" data-ng-clock>
<img src="{{pic.medium}}" class="grid-img" data-actual-width = "{{pic.actualWidth}}" data-actual-height="{{pic.actualHeight}}" />
</li>
</ul>
</body>有人能帮忙吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-07 11:56:38
您没有正确地处理对象，因此得到了未定义的异常。第二是你需要data.data.photos。
.controller('demo', ['$scope','imageService', function ($scope,imageService) {
imageService.loadImages().then(function(data){
data.data.photos.forEach(function(obj){
var desc = obj.description;
width = null;
height = null;
if(desc){
width = desc.match(/width="(.*?)"/)[1],
height = desc.match(/height="(.*?)"/)[1];
}
obj.actualHeight = height;
obj.actualWidth = width;
});
$scope.pics = data.data.photos;
});
}]);检查这个小提琴
Stack Overflow用户
发布于 2016-06-07 11:16:54
尝试将所有data.photos更改为data.data.photos
响应对象具有以下属性：
数据-{string}--响应体使用转换函数进行转换。响应的状态- {number} - HTTP状态代码。标头-{函数(HeaderName)}-标头getter函数。config - { object } -用于生成请求的配置对象。statusText - {string} - HTTP文本的响应。
你可以读这里
Stack Overflow用户
发布于 2016-06-07 11:15:12
不需要放置这些forEach，并且将data.photos更改为data.data.photos，就像按照E. Abrakov的答案一样，请看下面的内容
var myApp = angular.module('demoApp', []);
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
myApp.service('imageService',['$q','$http',function($q,$http,$scope){
this.loadImages = function(){
return $http.get("https://gist.githubusercontent.com/vedant1811/ebc4effaeeb2d4524460164a3524d003/raw/ecfa9855867c1b51dad52936cfe4b83a3447ea7a/example_model_response.json");
};
}])
.controller('demo', ['$scope','imageService', function ($scope,imageService) {
imageService.loadImages().then(function(data){
$scope.pics = data.data.photos;
});
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp" data-ng-controller="demo">
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false">
<li data-ng-repeat="pic in pics" class="grid" data-ng-clock>
<img src="{{pic.medium}}" class="grid-img" data-actual-width="{{pic.actualWidth}}" data-actual-height="{{pic.actualHeight}}" />
</li>
</ul>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37677634
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号