How to pretty print JSON string in JavaScript ?

Last Updated : 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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.

My Personal Notes

Related Articles

Table of Contents

How to pretty print JSON string in JavaScript ?