JavaScript data formatting/pretty printer

S

16

131

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.

Spectrogram answered 24/9, 2008 at 22:46 Comment(4)

Not sure if you are notified of edits of answers. So I write this comment to inform you that I added my own version of indented dump. :-) – Matlick 26/9, 2008 at 9:18

Note: The JSON.stringify() answer seems to be quite useful, though it's not accepted as 'the' answer. – Concepcionconcept 7/2, 2013 at 12:35

You could get a visual and intuitive output of objects using nodedump: github.com/ragamufin/nodedump – Dehiscence 3/10, 2013 at 23:44

Take a look there: #4811341 – Gratuity 23/7, 2018 at 14:23

M

33

I wrote a function to dump a JS object in a readable form, although the output isn't indented, but it shouldn't be too hard to add that: I made this function from one I made for Lua (which is much more complex) which handled this indentation issue.

Here is the "simple" version:

function DumpObject(obj)
{
  var od = new Object;
  var result = "";
  var len = 0;

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        value = "[ " + value + " ]";
      }
      else
      {
        var ood = DumpObject(value);
        value = "{ " + ood.dump + " }";
      }
    }
    result += "'" + property + "' : " + value + ", ";
    len++;
  }
  od.dump = result.replace(/, $/, "");
  od.len = len;

  return od;
}

I will look at improving it a bit.
Note 1: To use it, do od = DumpObject(something) and use od.dump. Convoluted because I wanted the len value too (number of items) for another purpose. It is trivial to make the function return only the string.
Note 2: it doesn't handle loops in references.

EDIT

I made the indented version.

function DumpObjectIndented(obj, indent)
{
  var result = "";
  if (indent == null) indent = "";

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        // Just let JS convert the Array to a string!
        value = "[ " + value + " ]";
      }
      else
      {
        // Recursive dump
        // (replace "  " by "\t" or something else if you prefer)
        var od = DumpObjectIndented(value, indent + "  ");
        // If you like { on the same line as the key
        //value = "{\n" + od + "\n" + indent + "}";
        // If you prefer { and } to be aligned
        value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
      }
    }
    result += indent + "'" + property + "' : " + value + ",\n";
  }
  return result.replace(/,\n$/, "");
}

Choose your indentation on the line with the recursive call, and you brace style by switching the commented line after this one.

... I see you whipped up your own version, which is good. Visitors will have a choice.

Matlick answered 24/9, 2008 at 23:6 Comment(9)

I like ;) Can't get it to work properly, but if you don't mind, I'm going to shamelessly steal the concept and write my own :) – Spectrogram 24/9, 2008 at 23:29

One short coming of this approach (compared with the JSON.stringify method Jason suggests) is that it does not show arrays of objects properly. When you have an array of objects it shows up as [object Object]. – Hellenic 12/3, 2010 at 17:58

@Ryan: You mean browser's native objects? Yes, looking back at my code, I saw I added a comment: // Too bad if one field is an object... :-P OK for my test here ... It is OK to dump user made structures. I see there are alternatives below, if you need something more robust. – Matlick 13/3, 2010 at 9:39

I cannot use this. I get infinite loop when I try to dump some json data. – Robbi 12/8, 2011 at 14:42

There is some kind of loop in that function, I couldn't find where. Gives Uncaught RangeError: Maximum call stack size exceeded – Hammett 20/6, 2013 at 13:59

@Hammett It is a recursive function, it calls itself. If you use it with a huge object, indeed it can exceed the call stack size, although it is unlikely. Or, like neoneye, you might have a reference doing a loop in the object (obj a references obj b referencing back obj a), which kills such algorithm. The Lua version detected such case, at the cost of added complexity. – Matlick 21/6, 2013 at 8:48

@Matlick Thanks for the answer. Luckily I found an amazing var dumper, check it out: github.com/padolsey/prettyPrint.js Make a table with all stuff, configurable depth and etc. Tested on my object which had the stack siz reached and worked fine. – Hammett 21/6, 2013 at 13:9

Yes, mine is very simplistic, easy to include in a small project for fast results, but limited. There are more robust dumpers around, some listed in this page... – Matlick 22/6, 2013 at 10:31

@Hammett & PhiLho - The Maximum call stack size could also be triggered on a small object; one with a property reference to itself. Such a reference would cause an infinite loop with this function. – Ranite 11/12, 2013 at 14:38

C

242

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.

Canst answered 24/9, 2008 at 23:1 Comment(11)

This is almost definitely the best answer you're going to get. I have taught 4 or 5 non-programmers to read and edit JSON.stringified data structures and use them extensively for configuration files. – Playgoer 24/9, 2008 at 23:19

Yes, very good answer, unfortunately, it doesn't seem to be playing nicely with something else in this app (not sure what yet). Works in isolation, though. – Spectrogram 24/9, 2008 at 23:23

Weird that it would cause problems - it does introduce the name "JSON" to the global namespace, so that may cause you problems. Check your namespace for "JSON" before adding this to see if a collision exists. – Canst 24/9, 2008 at 23:26

Yeah checked that. It's probably down to the prototype library, as it adds toJSON() methods to lots of stuff (not Object, but most everything else), which looks like it'll cause trouble. – Spectrogram 24/9, 2008 at 23:28

Also, maybe you should use the alternative of providing a number instead of '\t' as the last param...let us know what you find out. – Canst 24/9, 2008 at 23:29

It is indeed clashing with prototype's toJSON(), which returns a json string, which Doug's stuff is then jsonifying. Which, uh, isn't right :) – Spectrogram 24/9, 2008 at 23:41

Well, prototype is evil like that... ;) – Canst 24/9, 2008 at 23:48

An update on this, with Firefox 3.5 and above, JSON.stringify is built-in. (developer.mozilla.org/En/Using_JSON_in_Firefox), so if you are just trying to see a JSON object for debugging purposes, you can do it with no extra JS dependencies. – Katey 4/2, 2011 at 19:45

Also in Chrome. However, JSON.stringify fails on circular data JSON.stringify((function(){var x = []; x.push(x); return x})()) and on many other kinds of objects JSON.stringify(/foo/). – Kyles 9/3, 2011 at 1:16

Using this code snippet works in Firefox's FireBug console i.e. console.log('myObj', JSON.stringify(myObj,null,'\t')); However when I try to copy the console output to clipboard I get back the single line output. Firebug console however shows the indented output from JSON.stringify(). Any ideas why this happens? – Concepcionconcept 7/2, 2013 at 12:32

Firebug seems to wrap the output in a <span>. So to copy the indented text I need to a) first save the console output as HTML, b) View the HTML source and c)Copy the indented part from HTML source's <span> element to clipboard. Phew!! Quite a lot of work just to copy the indented data-structure it would seem. – Concepcionconcept 7/2, 2013 at 12:43

M

33

I wrote a function to dump a JS object in a readable form, although the output isn't indented, but it shouldn't be too hard to add that: I made this function from one I made for Lua (which is much more complex) which handled this indentation issue.

Here is the "simple" version:

function DumpObject(obj)
{
  var od = new Object;
  var result = "";
  var len = 0;

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        value = "[ " + value + " ]";
      }
      else
      {
        var ood = DumpObject(value);
        value = "{ " + ood.dump + " }";
      }
    }
    result += "'" + property + "' : " + value + ", ";
    len++;
  }
  od.dump = result.replace(/, $/, "");
  od.len = len;

  return od;
}

I will look at improving it a bit.
Note 1: To use it, do od = DumpObject(something) and use od.dump. Convoluted because I wanted the len value too (number of items) for another purpose. It is trivial to make the function return only the string.
Note 2: it doesn't handle loops in references.

EDIT

I made the indented version.

function DumpObjectIndented(obj, indent)
{
  var result = "";
  if (indent == null) indent = "";

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        // Just let JS convert the Array to a string!
        value = "[ " + value + " ]";
      }
      else
      {
        // Recursive dump
        // (replace "  " by "\t" or something else if you prefer)
        var od = DumpObjectIndented(value, indent + "  ");
        // If you like { on the same line as the key
        //value = "{\n" + od + "\n" + indent + "}";
        // If you prefer { and } to be aligned
        value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
      }
    }
    result += indent + "'" + property + "' : " + value + ",\n";
  }
  return result.replace(/,\n$/, "");
}