How can I display a JavaScript object?

Question

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.

Answer 1

Use native JSON.stringify method. Works with nested objects and all major browsers support this method.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

Link to Mozilla API Reference and other examples.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

---

Use a custom JSON.stringify replacer if you encounter this Javascript error

"Uncaught TypeError: Converting circular structure to JSON"

Answer 2

Assume object obj = {0:'John', 1:'Foo', 2:'Bar'}

Print object's content

for (var i in obj){
    console.log(obj[i], i);
}

Console output (Chrome DevTools) :

John 0
Foo 1
Bar 2

Hope that helps!

Answer 3

I think the best solution is to look through the object's Keys, and then through the Object's Values if you really want to see what the object holds...

console.log(Object.keys(obj));
console.log(Object.values(obj));

There is also this new option if you're using ECMAScript 2016 or newer:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Answer 4

If you want to use alert, to print your object, you can do this:

alert("myObject is " + myObject.toSource());

It should print each property and its corresponding value in string format.

Answer 5

Here's a way to do it:

console.log("%o", obj);

Answer 6

I always use console.log("object will be: ", obj, obj1). this way I don't need to do the workaround with stringify with JSON. All the properties of the object will be expanded nicely.