82

Is there a quick function to convert JSON objects received via jQuery getJSON to a string variable dump (for tracing/debugging purposes)?

2
  • 5
    Silly question - why was this flagged as spam?
    – ina
    Commented Mar 15, 2012 at 13:03
  • 1
    for the same reason my questions get down-votes, sometimes users are inaccurate with their clicks!
    – Toni Leigh
    Commented Oct 25, 2015 at 16:53

5 Answers 5

Reset to default
121

Yes, JSON.stringify, can be found here, it's included in Firefox 3.5.4 and above.

A JSON stringifier goes in the opposite direction, converting JavaScript data structures into JSON text. JSON does not support cyclic data structures, so be careful to not give cyclical structures to the JSON stringifier. https://web.archive.org/web/20100611210643/http://www.json.org/js.html

var myJSONText = JSON.stringify(myObject, replacer);
2
  • 1
    It's included in chrome also, but you've got a (huge) 404 on that json.org link
    – Dean Rather
    Commented May 23, 2012 at 0:03
  • 1
    If you just want to log data with this just: console.log(JSON.stringify(data, null)); pass null if you don't need a replacement function!
    – elliotrock
    Commented Jul 18, 2014 at 4:00
30

You can use console.log() in Firebug or Chrome to get a good object view here, like this:

$.getJSON('my.json', function(data) {
  console.log(data);
});

If you just want to view the string, look at the Resource view in Chrome or the Net view in Firebug to see the actual string response from the server (no need to convert it...you received it this way).

If you want to take that string and break it down for easy viewing, there's an excellent tool here: http://json.parser.online.fr/

1
  • It's useful to add an error handler otherwise getJSON will fail silently and you'll struggle to understand why it doesn't work : add .fail(function(jqxhr, status, error) { alert(status + ", " + error);}).
    – Skippy le Grand Gourou
    Commented Jan 17, 2020 at 10:59
13

i personally use the jquery dump plugin alot to dump objects, its a bit similar to php's print_r() function Basic usage:

var obj = {
            hubba: "Some string...",
            bubba: 12.5,
            dubba: ["One", "Two", "Three"]
        }
$("#dump").append($.dump(obj));
/* will return:
Object { 
     hubba: "Some string..."
     bubba: 12.5
     dubba: Array ( 
          0 => "One"
          1 => "Two"
          2 => "Three"
     )
}
*/

Its very human readable, i also recommend this site http://json.parser.online.fr/ for creating/parsing/reading json, because it has nice colors

2
  • 1
    this is really great, but it requires installing yet another plugin (and just for debug)
    – ina
    Commented Jul 26, 2010 at 14:00
  • yeah, i know... but when im looking for answers i often find something usefull in the answers because my problem relates to the problem. this plugin might indeed be a bit overkill when you just have a simple problem :P
    – Ties
    Commented Jul 26, 2010 at 14:11
4

Here is the code I use. You should be able to adapt it to your needs.

function process_test_json() {
  var jsonDataArr = { "Errors":[],"Success":true,"Data":{"step0":{"collectionNameStr":"dei_ideas_org_Private","url_root":"http:\/\/192.168.1.128:8500\/dei-ideas_org\/","collectionPathStr":"C:\\ColdFusion8\\wwwroot\\dei-ideas_org\\wwwrootchapter0-2\\verity_collections\\","writeVerityLastFileNameStr":"C:\\ColdFusion8\\wwwroot\\dei-ideas_org\\wwwroot\\chapter0-2\\VerityLastFileName.txt","doneFlag":false,"state_dbrec":{},"errorMsgStr":"","fileroot":"C:\\ColdFusion8\\wwwroot\\dei-ideas_org\\wwwroot"}}};

  var htmlStr= "<h3 class='recurse_title'>[jsonDataArr] struct is</h3> " + recurse( jsonDataArr );
  alert( htmlStr );
  $( document.createElement('div') ).attr( "class", "main_div").html( htmlStr ).appendTo('div#out');
  $("div#outAsHtml").text( $("div#out").html() ); 
}
function recurse( data ) {
  var htmlRetStr = "<ul class='recurseObj' >"; 
  for (var key in data) {
        if (typeof(data[key])== 'object' && data[key] != null) {
            htmlRetStr += "<li class='keyObj' ><strong>" + key + ":</strong><ul class='recurseSubObj' >";
            htmlRetStr += recurse( data[key] );
            htmlRetStr += '</ul  ></li   >';
        } else {
            htmlRetStr += ("<li class='keyStr' ><strong>" + key + ': </strong>&quot;' + data[key] + '&quot;</li  >' );
        }
  };
  htmlRetStr += '</ul >';    
  return( htmlRetStr );
}

</script>
</head><body>
<button onclick="process_test_json()" >Run process_test_json()</button>
<div id="out"></div>
<div id="outAsHtml"></div>
</body>
0
2

something along this?

function dump(x, indent) {
    var indent = indent || '';
    var s = '';
    if (Array.isArray(x)) {
        s += '[';
        for (var i=0; i<x.length; i++) {
            s += dump(x[i], indent)
            if (i < x.length-1) s += ', ';
        }
        s +=']';
    } else if (x === null) {
      s = 'NULL';
    } else switch(typeof x) {
        case 'undefined':
            s += 'UNDEFINED';
            break;
        case 'object':
            s += "{ ";
            var first = true;
            for (var p in x) {
                if (!first) s += indent + '  ';
                s += p + ': ';
                s += dump(x[p], indent + '  ');
                s += "\n"
                first = false;
            }
            s += '}';
            break;
        case 'boolean':
            s += (x) ? 'TRUE' : 'FALSE';
            break;
        case 'number':
            s += x;
            break;
        case 'string':
            s += '"' + x + '"';
            break;
        case 'function':
            s += '<FUNCTION>';
            break;
        default:
            s += x;
            break;
    }
    return s;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.