Updated April 10, 2023
Introduction to JSON Pretty
The ‘JSON Pretty’, it has been widely used in the Software industry. JSON Pretty, also known as ‘JSON Pretty Print’, helps to prettify JSON data and print it. ‘Pretty’ prettifies JSON content, and ‘Print’ prints the prettified JSON content. Today, let us see how Pretty print works, its syntax, and illustrate some examples for Pretty using the Pretty Print application. Instead, we also have many libraries for Pretty Printing in JavaScript, which help to convert JSON into any structured or readable format.
PrettyPrint is an application that helps in converting various formats to text files or any readable format. Formatting conventions can be used to adjust positioning, spacing, color contrast, shape and size and many other modifications for users to be able to view and understand the content. These prettyprinters for programming languages are also called as beautifiers.
Syntax:
<pre> element tag is to prettify the JSON objectSyntax wise, input data is provided in the form of JSON format as below.
{"sample": {
"sample1": [
{
"var": "value1",
"name":"name_Value1"
},
{
"var":"value2",
"name":"name_Value2"
},
{
"var":"value3",
"name":"name_Value3"
}
]
}
}Examples of JSON Pretty
Let us consider some examples using the Pretty Print tool,
Example #1
Here we will be beautifying JSON data with Spaces, 4 Tab Space
Code:
{
"employees": {
"employee": [
{
"id": "100",
"firstName": "Saideep",
"lastName": "Reddy",
"company":"Infosys"
},
{
"id": "200",
"firstName": "Anusha",
"lastName": "Kakarlapudi",
"company":"Cognizant"
},
{
"id": "300",
"firstName": "Karthick",
"lastName": "Sai",
"company":"Capgemini"
},
{
"id": "400",
"firstName": "Harika",
"lastName": "Reddy",
"company":"IBM"
}
]
}
}Output:
Example #2
For the above example, we shall display the content in Form format,
Example #3
For the same example mentioned above, we shall output the JSON input in Tree format.
Example #4
For the same example mentioned above, we shall output the JSON input in View Format,
Example #5
We shall Minify/ Compact the input JSON, which looks as below
Example #6
In this example, we give an object and try to print it in Pretty, i.e. easy to read. On using<pre> element, we can make the data Pretty,
Code:
<!DOCTYPE html>
<html>
<head>
<body>
</head>
<p id="SAMPLE_UP" style=
"font-size: 15px; font-weight: bold; color: blue">
</p>
<button onclick="sample_Run();">
click here
</button>
<pre id="SAMPLE_DOWN" style=
"color:green; font-size: 20px; font-weight: bold;">
</pre>
<script>
var sample_up = document.getElementById("SAMPLE_UP");
var sample_down = document.getElementById("SAMPLE_DOWN");
var obj = {
"employer1": {
"employee1": "Saideep",
"employee2": "Karthick"
},
"employee2": "Karthick",
"employee3": "Anusha"
};
sample_up.innerHTML = JSON.stringify(obj);
function sample_Run() {
sample_down.innerHTML = JSON.stringify(obj, undefined, 4);
}
</script>
</body>
</html>Output:
We had declared a JSON object and stored it into a variable, as we read before on JSON.stringify(), used this method to convert JS Object into String. Here we are using space size as 4, and JSON.stringify(obj, replacer, space) converts JS Object to string in Pretty format.
After clicking on the button
Example #7
Code:
<!DOCTYPE html>
<html>
<head>
<body>
</head>
<p id="SAMPLE_UP" style=
"font-size: 15px; font-weight: bold; color: blue">
</p>
<button onclick="sample_Run();">
click here
</button>
<pre id="SAMPLE_DOWN" style=
"color:green; font-size: 20px; font-weight: bold;">
</pre>
<script>
var sample_up = document.getElementById("SAMPLE_UP");
var sample_down = document.getElementById("SAMPLE_DOWN");
var obj = {
"employer1": {
"employee1": "Saideep",
"employee2": "Karthick"
},
"employee2": "Karthick",
"employee3": "Anusha" ,
"employee4": "Harika",
};
sample_up.innerHTML = JSON.stringify(obj);
function sample_Run() {
sample_down.innerHTML = JSON.stringify(obj,
['employee2', 'employee4'], 4);
}
</script>
</body>
</html>Output:
Here we specify properties to print the object of the object.
After clicking on the button
We can also use Python for Pretty print,
- Json module dumps() can be used to pretty-print JSON data.
- dumps() method returns JSON string from JSON Object
- Here we will be using the indent parameter to define the indentation level for string output.
Example #8
Code:
import json
json_data = '[{"employee_ID":109,"employee_Name":"Saideep","employee_Role":"TL"},' \
'{"employee_ID":208,"employee_Name":"Harika","employee_Role":"SSE"}]'
json_object = json.loads(json_data
json_str = json.dumps(json_object, indent=4)
print(json_str)Output:
json.loads() is used to create object from json string.
Json.dumps() method takes the object and returns json string; the indent parameter is used to specify the output string’s indentation.
Conclusion
Let us summarize this article on a good note. We have seen what Pretty is and how it works in Javascript as well as in Python. For Javascript, it works with <pre> tag, and in Python, it works with loads() and dumps() methods. We have also seen the Pretty Print application directly, which receives JSON input and prettifies accordingly with few examples. It also illustrated an example for Pretty in JS and Python. Pretty can prettify size, color, the indentation of the JSON output, format like Tree, simple text, View, or in a coded form.
Recommended Articles
We hope that this EDUCBA information on “JSON Pretty” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
