CODEWITHSUNDEEP
javascriptangularjsjsonparsing
abhishek
abhishek

Reputation: 301

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?

Upvotes: 0

Views: 165

Answers (3)

Siraj Hussain
Siraj Hussain

Reputation: 874

You were not properly handling the objects so that you were getting undefined exceptions. 2nd is you need 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;
    });
}]);

Check this jsfiddle

Upvotes: 1

E. Abrakov
E. Abrakov

Reputation: 463

Try to change all data.photos to data.data.photos

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions. status – {number} – HTTP status code of the response. headers – {function([headerName])} – Header getter function. config – {Object} – The configuration object that was used to generate the request. statusText – {string} – HTTP status text of the response.

You can read here

Upvotes: 2

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

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>

Upvotes: 1

Related Questions