JavaScript data formatting/pretty printer

Dan picture Dan · Sep 25, 2008 · Viewed 83.3k times · Source

I'm trying to find a way to pretty print a JavaScript data structure in a human-readable form for debugging.

I have a rather big and complicated data structure being stored in JS and I need to write some code to manipulate it. In order to work out what I'm doing and where I'm going wrong, what I really need is to be able to see the data structure in its entirety, and update it whenever I make changes through the UI.

All of this stuff I can handle myself, apart from finding a nice way to dump a JavaScript data structure to a human-readable string. JSON would do, but it really needs to be nicely formatted and indented. I'd usually use Firebug's excellent DOM dumping stuff for this, but I really need to be able to see the entire structure at once, which doesn't seem to be possible in Firebug.

Answer

Jason Bunting picture Jason Bunting · Sep 25, 2008

Use Crockford's JSON.stringify like this:

var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...

Variable text would look like this:

[
  "e",
   {
      "pluribus": "unum"
   }
]

By the way, this requires nothing more than that JS file - it will work with any library, etc.