Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

How to pretty print JSON string in JavaScript ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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. 

html




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

Petty print JSON string

Petty print JSON string

Example 2: This example is a bit similar to the previous one but it specifying the properties to print the object of the object. It also takes the advantage of JSON.stringify() method to print an object within <pre> element. 

html




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

Petty print JSON string

Petty print JSON string

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 arrow_drop_up
Last Updated : 14 Nov, 2022
Like Article
Save Article
Similar Reads
Related Tutorials