Categories
javascript javascript-objects serialization

How can I display a JavaScript object?

1924

How do I display the content of a JavaScript object in a string format like when we alert a variable?

The same formatted way I want to display an object.

10

  • 7

    Would you please reword your question? What do you mean by “formatted way”? As in, with rich formatting, like bold/italic/etc?

    Jun 5, 2009 at 19:03

  • is there a way to display the runtime value of a variable by printing the value of the variable using some console commands?

    Aug 3, 2015 at 6:54

  • 1

    @BlackPanther Just do console.log("", yourObject1, yourObject2, yourObject3, etc...);. A shorter version is to just do console.log(yourObject1, yourObject2, etc...);.

    Jul 31, 2017 at 11:52

  • 2

    Can you please select a better answer that more accurately reflects community consensus?

    Apr 3, 2018 at 16:54

  • 1

    Some tips: You can use colors to have a better view of: console.log(‘%c Sample Text’, ‘color:green;’); Or add some VAR in the text using: console.log(`Sample ${variable}`, ‘color:green;’);

    Jan 29, 2019 at 11:34

1290

If you want to print the object for debugging purposes, use the code:

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

will display:

screenshot console chrome

Note: you must only log the object. For example, this won’t work:

console.log('My object : ' + obj)

Note ‘: You can also use a comma in the log method, then the first line of the output will be the string and after that, the object will be rendered:

console.log('My object: ', obj);

28

  • 44

    That function also works on Google Chrome when using the JavaScript Console (Shift+Control+J or Shift+Control+I, depending on the Chrome version). Also note that console.log(obj1, obj2) works very nicely, too, so you don’t have to call console.log() for every object when logging multiple variables. Also, always remember to remove all such calls in production, as it will break browsers that do not implement it (such as Internet Explorer).

    – Felix

    Apr 22, 2010 at 9:31

  • 103

    Yes it prints [object Object] but it has a little expando-toggly button beside it that lets you inspect the contents of the object.

    – hughes

    Jul 5, 2011 at 13:46

  • 12

    @hughes it actually can do both. i have an object i created with: var obj = { “foo” : false }; and another object that is being passed into a callback from a server, the one passed through the callback prints with the little arrow so you can open it up, the statically created one just prints [object Object] with no arrow. I’m trying to figure this out too, any other thoughts?

    – benstraw

    Jul 8, 2011 at 0:08


  • 129

    console.log("id:"+obj); won’t output correctly as it outputs a string as you see it there, you need to specify it like this: console.log("id:"); console.log(obj);

    Mar 5, 2013 at 11:06

  • 19

    Try console.log(JSON.stringify(obj)) or console.dir(obj)

    – Robot Boy

    Jun 3, 2015 at 7:53

1290

If you want to print the object for debugging purposes, use the code:

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

will display:

screenshot console chrome

Note: you must only log the object. For example, this won’t work:

console.log('My object : ' + obj)

Note ‘: You can also use a comma in the log method, then the first line of the output will be the string and after that, the object will be rendered:

console.log('My object: ', obj);

28

  • 44

    That function also works on Google Chrome when using the JavaScript Console (Shift+Control+J or Shift+Control+I, depending on the Chrome version). Also note that console.log(obj1, obj2) works very nicely, too, so you don’t have to call console.log() for every object when logging multiple variables. Also, always remember to remove all such calls in production, as it will break browsers that do not implement it (such as Internet Explorer).

    – Felix

    Apr 22, 2010 at 9:31

  • 103

    Yes it prints [object Object] but it has a little expando-toggly button beside it that lets you inspect the contents of the object.

    – hughes

    Jul 5, 2011 at 13:46

  • 12

    @hughes it actually can do both. i have an object i created with: var obj = { “foo” : false }; and another object that is being passed into a callback from a server, the one passed through the callback prints with the little arrow so you can open it up, the statically created one just prints [object Object] with no arrow. I’m trying to figure this out too, any other thoughts?

    – benstraw

    Jul 8, 2011 at 0:08


  • 129

    console.log("id:"+obj); won’t output correctly as it outputs a string as you see it there, you need to specify it like this: console.log("id:"); console.log(obj);

    Mar 5, 2013 at 11:06

  • 19

    Try console.log(JSON.stringify(obj)) or console.dir(obj)

    – Robot Boy

    Jun 3, 2015 at 7:53

413

var output="";
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

8

  • 1

    This is what exactly i want. I am using google maps v3 and the directionrenderer returns an object. That has four items and in that one objects name keeps changing so we need to find that. For that this method really helped. Besides this way we can get all the names of the properties and objects. Or is there any other way to find the names of the objects and properties?

    Apr 28, 2011 at 14:08


  • 38

    +1, not all javascript is run in browsers or can be debugged in them.

    – Bill Yang

    Jul 25, 2011 at 2:19

  • 3

    You probably want to mask out the built in cruft with hasOwnProperty most of the time.

    – John

    Apr 20, 2012 at 0:58


  • 9

    Omg — 0: [; 1: o; 2: b; 3: j; 4: e; 5: c; 6: t; 7: ; 8: O; 9: b; 10: j; 11: e; 12: c; 13: t; 14: ];

    – JSideris

    Feb 20, 2015 at 8:16

  • 1

    A little late finding this, but as it got requested on my birthday last year (29th aug), here is a working fiddle. jsfiddle.net/MrMarlow/fq53o6o9

    – MrMarlow

    Sep 11, 2015 at 11:06