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.
<!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.
.png)
