How to pretty print JSON string in JavaScript ?

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.