How to pretty print JSON string in JavaScript ?

26 Jul, 2021
Given a JavaScript object and the task is to print the JSON object in pretty ( easy to read) format using JavaScript. Use <pre> element to display the object in pretty format.
Approach:
Declare a JSON object and store it into variable.
Use JSON.stringify(obj) method to convert JavaScript objects into strings and display it.
Use JSON.stringify(obj, replacer, space) method to convert JavaScript objects into strings in pretty format. In this example, we use space size four. It display the object in aligned format.
Example 1: This example uses JSON.stringify() method to print the object element within <pre> tag.
<!DOCTYPE html><html>  <head>    <title>        How to pretty print JSON        string in JavaScript ?    </title></head>  <body>    <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <button onclick="gfg_Run();">        click here    </button>          <pre id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </pre>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var obj = {            "prop_1": {                "prop_11": "val_11",                "prop_12": "val_12"            },            "prop_2": "val_2",            "prop_3": "val_3"        };              el_up.innerHTML = JSON.stringify(obj);          function gfg_Run() {            el_down.innerHTML = JSON.stringify(obj, undefined, 4);        }    </script></body>  </html>                    
Output:
Before clicking the button:
After clicking the button:
Example 2: This example is a bit similar to previous one but it specifying the properties to print the object of object. It also takes the advantage of JSON.stringify() method to print an object within <pre> element.
<!DOCTYPE html><html>  <head>    <title>        How to pretty print JSON        string in JavaScript ?    </title></head>  <body>    <h1 style="color:green;">         GeeksforGeeks     </h1>          <p id="GFG_UP" style=        "font-size: 15px; font-weight: bold;">    </p>          <button onclick="gfg_Run();">        click here    </button>          <pre id="GFG_DOWN" style=        "color:green; font-size: 20px; font-weight: bold;">    </pre>          <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");              var obj = {            "prop_1": {                "prop_11": "val_11",                "prop_12": "val_12"            },            "prop_2": "val_2",            "prop_3": "val_3"        };                  el_up.innerHTML = JSON.stringify(obj);          function gfg_Run() {            el_down.innerHTML = JSON.stringify(obj,                                ['prop_2', 'prop_3'], 4);        }    </script></body>  </html>                    
Output:
Before clicking the button:
After clicking the button:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
JSON
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Differences between Functional Components and Class Components in React
Roadmap to Learn JavaScript For Beginners
Hide or show elements in HTML using display property
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?