Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to pretty print json using javascript?
JavaScript Object Notation (JSON) is a standard format for storing and exchanging data. When working with JavaScript objects, displaying them in a readable format can be challenging, especially with complex nested structures. This article explores methods to pretty print JSON using JavaScript's built-in capabilities.
The Problem with Default Object Display
When you directly display a JavaScript object, it often appears as [object Object] or in a compact, unreadable format. Let's see this with a simple example:
<!DOCTYPE html>
<html>
<head>
<title>JSON Pretty Print Demo</title>
</head>
<body>
<h3>Output Console</h3>
<p>Output:</p>
<div id="output"></div>
<script>
var vehicle = {
id: 'v01',
type: 'bus',
length: 6
};
document.getElementById('output').innerHTML =
'Vehicle object: ' + JSON.stringify(vehicle);
</script>
</body>
</html>
Vehicle object: {"id":"v01","type":"bus","length":6}
While this output is valid JSON, it's compressed into a single line, making it difficult to read for complex objects.
Using JSON.stringify() with Spacing
The JSON.stringify() method accepts three parameters: the object to stringify, a replacer function (optional), and a space parameter for formatting. The space parameter adds indentation to create a pretty-printed format.
Syntax
JSON.stringify(value, replacer, space)
Parameters
- value: The JavaScript object to convert to JSON
- replacer: Optional function or array to transform values
- space: Number of spaces for indentation (or string for custom spacing)
Example: Pretty Printing with Indentation
<!DOCTYPE html>
<html>
<head>
<title>Pretty Print JSON</title>
</head>
<body>
<h3>Output Console</h3>
<p>Output:</p>
<pre id="output"></pre>
<script>
var book = {
"b_id": "b_001",
"author": {
"lastname": "Paul",
"firstname": "Alice"
},
"editor": {
"lastname": "Smith",
"firstname": "Bob"
},
"title": "A sample book for JSON",
"category": ["Javascript", "JSON", "Data Formatting"]
};
document.getElementById('output').textContent =
'Book object:<br>' + JSON.stringify(book, null, 4);
</script>
</body>
</html>
Book object:
{
"b_id": "b_001",
"author": {
"lastname": "Paul",
"firstname": "Alice"
},
"editor": {
"lastname": "Smith",
"firstname": "Bob"
},
"title": "A sample book for JSON",
"category": [
"Javascript",
"JSON",
"Data Formatting"
]
}
Using a Replacer Function
The second parameter allows you to transform values during the stringification process. Here's an example that converts names to uppercase:
<!DOCTYPE html>
<html>
<head>
<title>JSON with Replacer Function</title>
</head>
<body>
<h3>Output Console</h3>
<p>Output:</p>
<pre id="output"></pre>
<script>
function makeNameUppercase(key, value) {
if (key === "firstname" || key === "lastname") {
return value.toUpperCase();
}
return value;
}
var book = {
"b_id": "b_001",
"author": {
"lastname": "Paul",
"firstname": "Alice"
},
"title": "A sample book for JSON"
};
document.getElementById('output').textContent =
'Modified book object:<br>' + JSON.stringify(book, makeNameUppercase, 4);
</script>
</body>
</html>
Modified book object:
{
"b_id": "b_001",
"author": {
"lastname": "PAUL",
"firstname": "ALICE"
},
"title": "A sample book for JSON"
}
Comparison of Methods
| Method | Readability | Use Case |
|---|---|---|
JSON.stringify(obj) |
Poor - single line | Data transmission |
JSON.stringify(obj, null, 4) |
Excellent - formatted | Debugging, display |
JSON.stringify(obj, replacer, 4) |
Excellent - customized | Data transformation |
Key Points
- Use the third parameter (space) of
JSON.stringify()to add indentation - Values of 2-4 spaces are commonly used for readability
- The replacer function allows custom transformation of values
- Use
<pre>tags to preserve formatting in HTML output
Conclusion
JSON.stringify() with proper spacing parameters is the standard way to pretty print JSON in JavaScript. The space parameter creates readable, indented output perfect for debugging and data display.
1K+ Views
