Scott Van Vliet

Less Talk, More Rock

Simple Javascript Object Dump Function

In my years of doing Web development, I've written this function several times over; however, I can NEVER find the code when I need it!  Thus, here is a simple Javascript function to dump the contents of any object (posted to share, but also for my own permanent reference!)

 

<script language="javascript">

      

       var MAX_DUMP_DEPTH = 10;

      

       function dumpObj(obj, name, indent, depth) {

              if (depth > MAX_DUMP_DEPTH) {

                     return indent + name + ": <Maximum Depth Reached>\n";

              }

              if (typeof obj == "object") {

                     var child = null;

                     var output = indent + name + "\n";

                     indent += "\t";

                     for (var item in obj)

                     {

                           try {

                                  child = obj[item];

                           } catch (e) {

                                  child = "<Unable to Evaluate>";

                           }

                           if (typeof child == "object") {

                                  output += dumpObj(child, item, indent, depth + 1);

                           } else {

                                  output += indent + item + ": " + child + "\n";

                           }

                     }

                     return output;

              } else {

                     return obj;

              }

       }

      

</script>

 

This will spit out the contents of the object (and nested objects) to an indented string, which is useful when trying to inspect the contents of DOM, etc.  Note that a recursive method like this can be dangerous, so I’ve included a maximum depth flag, MAX_DUMP_DEPTH, to ensure your browser doesn’t get locked up in an infinite nested loop.

 

Enjoy!

Comments

Jim said:

Thank you. I have also rewritten this function many times.
# October 30, 2006 4:02 PM

mozilla said:

Thought u'd like it.

# March 22, 2007 9:20 PM

Paul Feakins said:

Hi, Firefox says it's a recursive loop even when I put the max depth to 1.

Any ideas?

# July 2, 2007 5:49 AM

NerdFusion » JavaScript tips said:

Pingback from  NerdFusion &raquo; JavaScript tips

# September 5, 2007 7:41 PM

jojo said:

Wonderful, thanks!  I've not only written this many times, but have forgotten how to write it even more times than that.  Found yours searching for how to write it yet again...thank you.

# December 22, 2007 8:03 AM

a said:

eh.. how do you use this?? I could of swore javascript had an inbuilt console write/dump() function

# February 7, 2008 12:57 PM

Steve Wamsley said:

Beautiful! Got my JS code to work in minutes with this lil' snippet instead of hours. Major kudos.

# September 22, 2008 10:53 AM

DK said:

I got the following exception when runningitunderfirefox 3.0.3

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHistory.length]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: chrome://testextension/content/overlay.js :: dumpObj :: line 76"  data: no]

Source File: chrome://testextension/content/overlay.js

Line: 76

the line in question is "for (var item in obj)"

any ideas? will also look in javascript docs, but fear it is something to do with the firefox 3 implementation of javascript (1.8)

# October 4, 2008 8:39 AM

hensem said:

my object contain array, so i modified my code to this:

function dumpObj(obj, name, indent, depth) {

   var MAX_DUMP_DEPTH = 10;

   if (depth > MAX_DUMP_DEPTH) {

       return indent + name + ": <Maximum Depth Reached>\n";

   }

   if (typeof obj == "object") {

       var child = null;

       var output = indent + name;

       var total = 0;

       if (obj instanceof Array)

       {

           total = obj.length;

           output += " (Array)\n";

       }

       else

       {

           for (var item in obj)

           {

               total++;

           }

           output += " (Object)\n";

       }

       output += indent + "Total item: " + total + "\n";

       indent += "\t";

       if (obj instanceof Array)

       {

           for (var i = 0; i < obj.length; i++)

           {

               child = obj[i];

               output += dumpObj(child, i, indent, depth + 1);

           }

       }

       else

       {

           for (var item in obj)

           {

               try {

                   child = obj[item];

               }    

               catch (e) {

                   child = "<Unable to Evaluate>";

               }

               if (typeof child == "object") {

                   output += dumpObj(child, item, indent, depth + 1);

               }

               else {

                   output += indent + item + ": " + child + "\n";

               }

           }

       }

       return output;

   }

   else {

       return obj + " is not an object.";

   }

}

this is sample of my object in json:

{"vTT":[{"TTID":"TT050722-400","RealTTID":"000000000002700"},{"TTID":"TT050719-400","RealTTID":"000000000001519"},{"TTID":"TT050725-1400","RealTTID":"000000000004097"},{"TTID":"TT050725-1400","RealTTID":"000000000004098"},{"TTID":"TT081124-400","RealTTID":"000000000007027"}]}

# January 8, 2009 3:10 AM

Bob said:

If you're developing under Firefox, the Firebug addon is a good tool to have. It has a DOM console that lets you see pretty much every data structure that comes into play in the execution of your code. You can tell it to hide DOM properties and functions, and you can tell it to hide user functions and only show properties.

I find this easier than dumping to the page.

# May 20, 2009 5:58 AM

Mayank said:

Too good .. was looking for such a fucntion since long ..

thanks .. :)

# September 16, 2009 6:28 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)