JSON to string variable dump

Question

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

for the same reason my questions get down-votes, sometimes users are inaccurate with their clicks! — Toni Leigh, Oct 25 '15 at 16:53

score 121 · Accepted Answer · edited Jan 16 '17 at 22:34

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);

edited Jan 16 '17 at 22:34

don

1,497
1
13
27

answered Jul 26 '10 at 11:24

Anders

6,188
4
26
31

1

It's included in chrome also, but you've got a (huge) 404 on that json.org link – Dean Rather May 23 '12 at 00: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 Jul 18 '14 at 04:00

score 30 · Answer 2 · answered Jul 26 '10 at 11:24

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/

answered Jul 26 '10 at 11:24

Nick Craver

623,446
136
1,297
1,155

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 Jan 17 '20 at 10:59

Ties · Answer 3 · 2010-07-26T14:12:40.863

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

edited Jul 26 '10 at 14:12

answered Jul 26 '10 at 12:50

Ties

5,726
3
28
37

1

this is really great, but it requires installing yet another plugin (and just for debug) – ina Jul 26 '10 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 Jul 26 '10 at 14:11

score 4 · Answer 4 · edited Jun 08 '11 at 13:49

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>

hotzen · Answer 5 · 2013-03-15T20:51:15.633

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;
}

JSON to string variable dump

5 Answers5

Linked