JSON.stringify on nested object ignores nested objects

Question

I'm genereating an object which looks like that when you inspect it with Chrome:

object in Chrome inspector

When I try to stringify this object with JSON.stringify I get the following result:

{
    "results" : [{
            "ID" : 1,
            "NAME" : "Admin"
        }, {
            "ID" : 2,
            "NAME" : "Standarduser"
        }, {
            "ID" : 3,
            "NAME" : "Consultant"
        }, {
            "ID" : 4,
            "NAME" : "Leergruppe"
        }
    ]
}

For some reason all the nested nodes are missing. I'm sure this is pretty simple and obvisious, but at the moment I simply can't find my mistake. Many thanks for you help!

EDIT: JSFiddle how the JSON is created: http://jsfiddle.net/VJTaV/

How are you building this object? I created the same object, and `JSON.stringify` works fine: http://jsfiddle.net/H8CF2/ — gen_Eric, Mar 27 '14 at 14:38
Hi Rocket, I've edited my question and created an entry on jsfiddle. It's not runnable but I guess it's enough to get the idea how it's created. — user2345998, Mar 27 '14 at 14:56

score 4 · Accepted Answer · edited May 23 '17 at 12:21

4

Since your jsfiddle shows an ajax call, it is likely that you have called JSON.stringify() before the ajax results are available. You will need to put it in the success callback to be executed after the ajax finished.

Chrome inspector will show the properties as when you're modifying an object after it was logged you later can expand and see the new properties that have not yet existed at the time of the console.log call.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 27 '14 at 15:07

Bergi

630,263
148
957
1,375

Thanks, of course that was the reason. For now I've changed the .get call to an .ajax call and made this synchronous. – user2345998 Mar 28 '14 at 08:46

score 1 · Answer 2 · answered Mar 27 '14 at 16:27

1

As stated by Bergi, you are trying to stringify data not loaded yet, because $.get calls are asynchronous. You can attach .done callback to each of them, or, if you want execute a code only when all request are finished, use jQuery.when :

var jqXHRs = [];

$( data.results ).each(function( key, val ) {
  var jqXHR = $.get( userDataUrl, "", function( res ) {
    // ...
  });

  jqXHRs.push(jqXHR);
});

$.when.apply( $, jqXHRs ).done(function() {
    console.log( val ); // will log all nested nodes
});

answered Mar 27 '14 at 16:27

Anthony Garcia-Labiad

3,531
1
26
30

Thanks a lot for this input, but one question though: You write I could attach .done to each request - but I can't see the difference to using the success-callback at this point. – user2345998 Mar 28 '14 at 08:52
success callback is the old API, it is now recommended to use .done instead, but result is quite the same. – Anthony Garcia-Labiad Mar 28 '14 at 09:27

JSON.stringify on nested object ignores nested objects

2 Answers2