While debugging and developing with javascript, I often wanted to alert the objects, so I used the below code:

for(a in obj)
{
  alert(a +' = '+obj[a])
}    

It serves well, but it is too annoying. I want to know if there is anything just like this for arrays:

var temp = ['a','b','c'];
alert(temp); // it will alert a,b,c 

So what I wish to do is:

var temp = {a:'a',b:'b',c:'c'};
alert(temp) ; // It should alert json {a:'a',b:'b',c:'c'}

Or any other better suggestion so I could look up the object easily.

While debugging and developing with javascript, I often wanted to alert the objects, so I used the below code:

for(a in obj)
{
  alert(a +' = '+obj[a])
}    

It serves well, but it is too annoying. I want to know if there is anything just like this for arrays:

var temp = ['a','b','c'];
alert(temp); // it will alert a,b,c 

So what I wish to do is:

var temp = {a:'a',b:'b',c:'c'};
alert(temp) ; // It should alert json {a:'a',b:'b',c:'c'}

Or any other better suggestion so I could look up the object easily.

• javascript
• debugging

Share Improve this question Follow edited Aug 21, 2012 at 16:29 Thom Smith 14.1k66 gold badges4848 silver badges9898 bronze badges asked Jul 24, 2012 at 13:39 Rupesh PatelRupesh Patel 3,07555 gold badges3030 silver badges4949 bronze badges 3

• 3 How about alert(JSON.stringify(temp));? – James Allardice Commented Jul 24, 2012 at 13:41
• @JamesAllardice yes it is good one but I want to extend the object definition. How it has been done in case of array that they are alerted like strings ? – Rupesh Patel Commented Jul 24, 2012 at 13:49
• 1 @RupeshPatel - The way it's done with arrays is an internal part of the language. It's documented in detail in the ECMAScript specification. The same is not true of objects. You can overwrite the Object.prototype.toString method, or you can call another function as shown in various answers. – James Allardice Commented Jul 24, 2012 at 13:52

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

Alert calls toString, so you can overwrite toString for debugging purposes:

Object.prototype.toString = function() {
    return JSON.stringify(this);
};

So you can just call alert(foo); and it will display the JSON representation of foo

Use

alert(JSON.stringify(temp)) ;

instead of

alert(temp) ;  

You can also do this so the alerted format can be as you want

 Object.prototype.toString = function{
    var str='';
    for(a in this)
    {
      str+=a +' = '+obj[a]);
    }    
    }

Or any other better suggestion so I could look up the object easily.

Most good browsers' console will let you drill down into an object if you log it. For example, with Chrome:

console.log(obj);

Will log a tree-view object to the console.

One solution is:

dump() - Javascript equivalent of PHP's print_r() function

Perl provides Data::Dumper for work like this. Perfect for situations like this. Great for debugging.

A better approach is using JSON.stringify:

JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, 4); // Indented 4 spaces
JSON.stringify({a:1,b:2,c:{d:1,e:[1,2]}}, null, "\t"); // Indented with tab

Ref: How Can I Beautify JSON Programmatically

And alert() will only cause you more grief, start using console log. They are persistent and allows you to refer to the output more consistently.

Ref: How to Print Debug Messages in the google chrome javascript console

Better yet: Use a JavaScript debugger to analyse your objects. This is generally a better experience than simply printing or alertingthings out. But console logs are generally better if you have to do this in many locations.

Ref: How do you launch the javascript debugger in Google Chrome?

The javascript reference guide says there is a toString method for javascript Objects, see the page https://developer.mozilla/en/JavaScript/Reference/Global_Objects/Object/toString

It is on the mozilla developer page but I believe that should be what you need. excerpt is here, " var o = new Object(); o.toString(); "

you can use this function:

function dump(arr,level) {
    var dumped_text = "";

    if(!level) level = 0;
    var level_padding = "";

    for(var j=0;j<level+1;j++)
        level_padding += "    ";

    var type = typeof(arr);

    if (arr === null){
        dumped_text = "null";
    } else if (arr instanceof Array) {
        dumped_text += "[";

        for(var item in arr) {
            var value = arr[item];
            dumped_text += dump (value, level+1) + ',';
        }

        if(dumped_text.length > 1)
            dumped_text = dumped_text.substring (0, dumped_text.length-1);
        dumped_text += "]";
    } else if(type == 'object') {
        dumped_text += "{\n";

        for(var item in arr) {
            var value = arr[item];
            dumped_text += level_padding + item + " : ";
            dumped_text += dump(value,level+1) + ',\n';
        }

        if(dumped_text.length > 2)
            dumped_text = dumped_text.substring (0, dumped_text.length-2);

        dumped_text += "\n" + level_padding.substring (0, level_padding.length-4) + "}";
    } else if (type == 'string'){
        dumped_text = "'" + arr + "'";
    } else if (type == 'number'){
        dumped_text = arr + "";
    } else if (type == 'boolean'){
        dumped_text = arr + "";
    }
 return dumped_text;
}