Skip to content
Related Articles

Related Articles

How to pretty print JSON string in JavaScript ?
  • Last Updated : 21 Jun, 2019

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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :