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.
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
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
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.
Please Login to comment...