How Can I Display A Javascript Object?

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.

Solution 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"

Solution 2:

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:

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);

Solution 3:

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

Solution 4:

console.dir(object):

Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.

Note that the console.dir() feature is non-standard. See MDN Web Docs

Solution 5:

try this :

console.log(JSON.stringify(obj))

This will print the stringify version of object. So instead of [object] as an output you will get the content of object.