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.