AngularJs resolving errors caused by circular JSON Structures

Question

So I'm having issues with the following error:

chartsuccessfulapploginsController.js:59 TypeError: Converting circular structure to JSON at Object.stringify (native)

With this snippet of code, that retrieves data from a chart:

 var appjson = '{\"APP_DATA_RETRIEVED\" : \"fail\"}';
 var appPostRequest = $.get(appurl, data, appconfig);
 appPostRequest.done(function(appdata){
     console.log(appdata);
     var date=$scope.final.rows[selectedItem.row].c[0].v;
     appjson = JSON.stringify(appdata);
     console.log(appjson);
     var postResponse = jQuery.parseJSON(appjson);
     var postResponse2=postResponse.Response;
     var post=[];
     console.log(postResponse2.length);
     for(i=0; i<postResponse2.length; i++){
         var data = postResponse2[i];
         var dt = new Date(postResponse2[i]['startTime']);
         var day = (dt.getMonth() + 1) + '-' + dt.getDate() + '-' + dt.getFullYear();
         if(day==date){
             post=post.concat(data);
             console.log(data);
         }
     }
     console.log(post);
     $scope.gridOptions8.data=post;
     $scope.failchartvisible=true;
     $scope.successchartvisible=false;
     console.log($scope.gridOptions8.data);
     $scope.$apply()//error originates from here

The "appdata" parameter in the done function is a JSON object that always has this structure:

{
    "Response": [{
        "challenge": "rp6lssenku72b2ppr4gkjb4q92",
        "startTime": "2016-04-26 10:41:46.0",
        "successfullyCompleted": false,
        "id": 1,
        "username": "bojan1037"
    }, {
        "challenge": "ljtqvmk1mcqqqg5m0op0fljnek",
        "startTime": "2016-04-26 10:49:56.0",
        "successfullyCompleted": false,
        "id": 4,
        "username": "bojan1037"
    }, {
        "challenge": "h062sm69lpkib7t3sk4fuppi1v",
        "startTime": "2016-04-26 14:53:31.0",
        "successfullyCompleted": false,
        "id": 10,
        "username": "bojan1037"
    }],
    "Error": ""
}

I understand that it has something to do with json.stringify. However, I can't for the life of me figure out how to fix the error, as I can't see how that appdata could have a circular reference. Can anyone help me figure it out? Whoever answers correctly will have my eternal gratitude.

Is the `appdata` exactly like what you provided just before the JSON.stringify? Did you `console.log` it? — MMhunter, Aug 10 '16 at 04:13
It looks like the problem is not in your given code since it originates from `$scope.$apply()`. Maybe in some $watch or binding functions i think. — MMhunter, Aug 10 '16 at 04:29
The problem with that is this whole thing worked before. The only difference was the JSON was just the array of JSON objects — James Falter, Aug 10 '16 at 05:22
it's not really clear where your data is getting mangled here, but what is clear is that you are trying to use jQuery to parse and modify data that you then are using in angular bindings, which is generally unnecessary and error prone. — Claies, Aug 10 '16 at 13:43
Also, how is this question different from the question you posted here two days ago? http://stackoverflow.com/questions/38820441/angularjs-typeerror-converting-circular-structure-to-json-at-object-stringify — Claies, Aug 10 '16 at 13:48
to me, this feels like a lot of unnecessary work. for example, why are you using `JSON.Stringify` on the data, only to log it and then run `jQuery.parseJSON` on it? if it was already an object, what's the point of converting the object to a string and then converting it back into a different object? that's likely your problem. — Claies, Aug 10 '16 at 13:53
besides which, if you use angular aware functions instead of jQuery, none of this conversion back and forth or calling `$scope.$apply()` would be necessary anyway. — Claies, Aug 10 '16 at 13:55

Indra Uprade · Answer 1 · 2016-08-10T13:19:58.650

0

It seems that the culprit is your variable appjson. Somehow it is creating a circular reference with strigify JSON object. Instead of this:

var appjson = '{\"APP_DATA_RETRIEVED\" : \"fail\"}';

You can try declaring like this:

var appjson = {};

And whenever you feel the response is unexpected, you can fill this empty object with desired JSON values later.

edited Aug 10 '16 at 13:19

answered Aug 10 '16 at 02:39

Indra Uprade

773
5
12

Same result, I'm afraid. – James Falter Aug 10 '16 at 02:44
try this out appjson = JSON.parse(appdata); – Indra Uprade Aug 10 '16 at 02:45
nope, returns this error: Uncaught SyntaxError: Unexpected token o in JSON at position 1 – James Falter Aug 10 '16 at 02:58
still the issue ? Could you please try this - appjson =JSON.parse(JSON.stringify(appdata)); – Indra Uprade Aug 10 '16 at 13:29

score 0 · Answer 2 · answered Aug 10 '16 at 05:04

0

You don't need to convert variable type to string from json in your code : appjson = JSON.stringify(appdata);.

I think you'd better use $httpProvider in angularjs.

Check yourself API on this link.

answered Aug 10 '16 at 05:04

Saebyeok

124
1
4

I do that for error checking. Whether or not I use $httpProvider has no relevance to this question. – James Falter Aug 10 '16 at 05:17

AngularJs resolving errors caused by circular JSON Structures

2 Answers2