Print JSON parsed object?

Question

I've got a javascript object which has been JSON parsed using JSON.parse I now want to print the object so I can debug it (something is going wrong with the function). When I do the following...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

I get multiple [object Object]'s listed. I'm wondering how would I print this in order to view the contents?

Solution 1

Most debugger consoles support displaying objects directly. Just use

console.log(obj);

Depending on your debugger this most likely will display the object in the console as a collapsed tree. You can open the tree and inspect the object.

Solution 2

You know what JSON stands for? JavaScript Object Notation. It makes a pretty good format for objects.

JSON.stringify(obj) will give you back a string representation of the object.

Solution 3

If you want a pretty, multiline JSON with indentation then you can use JSON.stringify with its 3rd argument:

JSON.stringify(value[, replacer[, space]])

For example:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

or

JSON.stringify(obj, null, 4);

will give you following result:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

In a browser console.log(obj) does even better job, but in a shell console (node.js) it doesn't.

Solution 4

try console.dir() instead of console.log()

console.dir(obj);

MDN says console.dir() is supported by:

• FF8+
• IE9+
• Opera
• Chrome
• Safari

Solution 5

to Print JSON parsed object just type

console.log( JSON.stringify(data, null, " ") );

and you will get output very clear

View more solutions

Comments

[BiAiB]

as a sidenote, for (property in obj) will list all properties, even the inherited ones. So you will get a lot of extraneous one cominng for Object.prototype and any 'mother class'. This is unconvenient with json objects. You have to filter them with hasOwnProperty() to get only the properties that this object owns.

[jasonscript]

Only available in IE9+

[oHo]

console.dir() is also available in FF8+, Opera, Chrome and Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir

[Shahar]

It's worth mentioning that in chrome (and perhaps other browsers) when combined with a string like this: console.log("object: " + obj) it does not display the object, but instead will output "object: [Object obj]".

[Hoang Le]

Great! This is the best solution for me. Thanks.

[Mingyu]

I'm surprised this answer is at the bottom...... This should be the accepted answer :-)

[David]

nice reference answer

[Dave Anderson]

@Shahar console.log("object: %O", obj) (Chrome) or console.log("object: %o", obj) (Firefox|Safari) will give you access to the object details, see my answer below.

[SuperUberDuper]

What if you don't want a string representation, but rather the object as it would appear in a code editor?

[cHao]

@SuperUberDuper: ...Then you wouldn't be trying to build a string representation, now, would you. :)

[Xsmael]

what about node js ?

[everton]

%O is really helpful

[lekant]

@DaveAnderson good shot for the object formatting in the console.

[Leo Flaherty]

@Shahar thanks, yours was the information I needed. Should be added to the answer.

[jasonleonhard]

I believe SuperUberDuper was asking if the object could be logged or viewed without converting it to a string. If viewing in the browser the DOM needs an element, you can stringify json so and set an elements contents innerHTML to that string to view it on the page.

[jasonleonhard]

For example: import Json from './data.json'; var el = document.createElement('div'); el.innerHTML = JSON.stringify(Json);

[Shahar]

In addition to @DaveAnderson 's method, using a comma to separate strings from objects can also work: console.log("My object: ", obj)

[SourceOverflow]

The better solution to the here mentioned methods is simply console.log({obj}). (better as in better readable output and less to write, but still clear syntax)

[Adil Saju]

@Shahar Exactly. thats why I've reached in this page.

[Nassim]

good , but does not support string concatenation like log("string " + variable)

[Anthonius]

could you please describe what does %O for? should it be O specifically? - your solution work like a charm

[mbenhalima]

O stands for object, so as long as the object can be printing as a string, it should be printed with no issues. This has helped me troubleshoot in many cases where I wasn't sure where the error is

[Anthonius]

I forgot to inform here, actually we don't need to use %O. We can directly use console.log("object: ", obj) thank you @mbenhalima

[MarsAndBack]

So then this is the same as the accepted answer.

[MarsAndBack]

FYI, in Firefox, %O now seems to output as an expandable object inside the console.