AngularJS http.get verify valid json

Question

When getting a json from a URL I only want to work with it, when the data is valid.

my approach so far by using JSON:

$http.get(
            'data/mydata.json'
                + "?rand=" + Math.random() * 10000,
            {cache: false}
        )
            .then(function (result) {

                try {
                    var jsonObject = JSON.parse(JSON.stringify(result.data)); // verify that json is valid
                    console.log(jsonObject)

                }
                catch (e) {
                    console.log(e) // gets called when parse didn't work
                }


            })

However before I can do the parsing, angular already fails itself

SyntaxError: Unexpected token { at Object.parse (native) at fromJson (http://code.angularjs.org/1.2.0-rc.2/angular.js:908:14) at $HttpProvider.defaults.defaults.transformResponse (http://code.angularjs.org/1.2.0-rc.2/angular.js:5735:18) at http://code.angularjs.org/1.2.0-rc.2/angular.js:5710:12 at Array.forEach (native) at forEach (http://code.angularjs.org/1.2.0-rc.2/angular.js:224:11) at transformData (http://code.angularjs.org/1.2.0-rc.2/angular.js:5709:3) at transformResponse (http://code.angularjs.org/1.2.0-rc.2/angular.js:6328:17) at wrappedCallback (http://code.angularjs.org/1.2.0-rc.2/angular.js:9106:81) at http://code.angularjs.org/1.2.0-rc.2/angular.js:9192:26 angular.js:7861

How can I prevent angular from throwing this error or how else should I handle verifying the JSON ?

UPDATE: Solution:

$http.get(
// url:
'data/mydata.json'
    + "?rand=" + Math.random() * 10000

,

// config:
{
    cache: false,
    transformResponse: function (data, headersGetter) {
        try {
            var jsonObject = JSON.parse(data); // verify that json is valid
            return jsonObject;
        }
        catch (e) {
            console.log("did not receive a valid Json: " + e)
        }
        return {};
    }
}
)

Its good story but can you please post your result.data? or better Plunker — Maxim Shoustin
– Maxim Shoustin, Commented Oct 17, 2013 at 9:51
i have the same issue. it started happening on one of the values being returned. the question is why did the json become invalid? shouldn't the server encode it properly? — Sonic Soul
– Sonic Soul, Commented Mar 18, 2014 at 0:29

Community · Accepted Answer · 2017-05-23 11:44:19Z

5

You can override transformResponse in $http. Check this other answer.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 17, 2013 at 10:03

Laurent Perrin

14.9k5 gold badges53 silver badges49 bronze badges

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

Comments

Daniel Sánchez · Accepted Answer · 2015-07-30 22:40:26Z

I was looking for the same thing, and transformResponse does the job, BUT, I dont like using transformResponse everytime i use $http.get() or even overriding it because some $http.get() will be json and some not.

So, here is my solution:

myApp.factory('httpHandler', function($http, $q) {            
  function createValidJsonRequest(httpRequest) {
    return {
      errorMessage: function (errorMessage) {
        var deferred = $q.defer();

        httpRequest
          .success(function (response) {
            if (response != undefined && typeof response == "object"){
                deferred.resolve(response);
            } else {
                alert(errorMessage + ": Result is not JSON type");
            }
          })
          .error(function(data) {
            deferred.reject(data);
            alert(errorMessage + ": Server Error");
          });

        return deferred.promise;
      }
    };
  }

  return {
    getJSON: function() {
      return createValidJsonRequest($http.get.apply(null, arguments));
    },
    postJSON: function() {
      return createValidJsonRequest($http.post.apply(null, arguments));
    }
  }
});


myApp.controller('MainCtrl', function($scope, httpHandler) {
  // Option 1
  httpHandler.getJSON(URL_USERS)
    .errorMessage("MainCtrl -> Users")
    .then(function(response) {
      $scope.users = response.users;
    });


  // Option 2 with catch
  httpHandler.getJSON(URL_NEWS)
    .errorMessage("MainCtrl -> News")
    .then(function(response) {
      $scope.news = response.news;
    })
    .catch(function(result){
      // do something in case of error
    });


  // Option 3 with POST and data
  httpHandler.postJSON(URL_SAVE_NEWS, { ... })
    .errorMessage("MainCtrl -> addNews")
    .then(function(response) {
         $scope.news.push(response.new);
    });

});

Collectives™ on Stack Overflow

AngularJS http.get verify valid json

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related