Abhishek Abhishek - 6 months ago 34
JSON Question

AngularJs : json parsing

I am trying to parse a Json file and display photos on web using angularjs.
But Json data is not getting parsed.

This is my 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;
});;
}]);


Here's a part of my Json File:

{
"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"
},


Here's my HTml body :

<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>


Please anyone can help?

Answer

No need to put those forEach and in addition change data.photos to data.data.photos like as per E. Abrakov answer, take a look at the following stuff

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>