AngularJs : json parsing

Question

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?

what does "Json data is not getting parsed" mean, exactly? if you place a few console.log statements inside your .then callback, do you not have the data you expect? — Claies
– Claies, Commented Jun 7, 2016 at 11:08
Try using the Network tab on your browser's developer console to make sure that what you are receiving what you think you are. The response might be simply a string and not an object as you think. Also it would help if you explained what is the exact error or issue. — dearn44
– dearn44, Commented Jun 7, 2016 at 11:09
I want to display images of medium size as in json file. But nothing is displayed ! @dearn44 — abhishek
– abhishek, Commented Jun 7, 2016 at 11:12
Try my suggestion and tell us the actual response that comes from your call in imageService.loadImages(). Use the developer console or add another function for the case that your promise does not get resolved. — dearn44
– dearn44, Commented Jun 7, 2016 at 11:17
your code has multiple issues. After fixing the code to correct the issues with data vs data.data, the .then function still fails, specifically because your code is looking for a match to a string desc that is "" and won't have any matches found. You should take a bit of time to learn to debug your code a bit more. — Claies
– Claies, Commented Jun 7, 2016 at 11:29

E. Abrakov · Accepted Answer · 2016-06-07 11:25:01Z

2

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

edited Jun 7, 2016 at 11:25

answered Jun 7, 2016 at 11:16

E. Abrakov

4632 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

An explanation why would help OP understand better

dearn44 Over a year ago

It could also be d.photos, but trying randomly until you get it is not the correct way of solving his issue.

charlietfl Over a year ago

@dearn44 This answer is because OP's data is actually a $http response object that among other properties include the data property. It is not a guess

abhishek Over a year ago

Nope. data.data.photos will not work ..! I guess raw github url is prevented in ajax call

charlietfl Over a year ago

@Abhishek you would find that out in your error handling but you haven't implemented any.

Siraj Hussain · Accepted Answer · 2016-06-07 11:56:38Z

1

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

answered Jun 7, 2016 at 11:56

Siraj Hussain

8749 silver badges25 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:52:33Z

1

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>

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jun 7, 2016 at 11:15

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

2 Comments

abhishek Over a year ago

Yes.. I guess /raw/ github url are restricted from being used in ajax calls

abhishek Over a year ago

Hmm... Thanks a lot @Nidish .. :)

Collectives™ on Stack Overflow

AngularJs : json parsing

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related