To make your JSON data more readable and organized using our tutorial guide on how to pretty-print JSON using JavaScript. Discover the built-in methods provided by JavaScript, such as JSON.stringify() and JSON.parse(), as well as external libraries like prettier. With our step-by-step instructions and code examples, you’ll be able to format your JSON data like a pro in no time.
When working with JSON data, it is essential to format it properly to make it easy to read and understand. In this tutorial, you will learn how to pretty-print JSON using JavaScript using built-in methods provided by JavaScript, such as JSON.stringify() and JSON.parse(), as well as external libraries like prettier.
How to Pretty print JSON in JavaScript?
JavaScript provides several built-in methods for formatting JSON data. Here, you will learn two popular methods: JSON.stringify() and JSON.parse(), as well as external libraries like prettier.
- Using
JSON.stringify() - Using
JSON.parse() - Using External Libraries
Using JSON.stringify()
The JSON.stringify() method converts a JavaScript object into a JSON string. It also accepts two additional parameters: replacer and space.
The replacer parameter can be used to filter and transform the JSON data before it is stringified. It can be a function or an array of properties to include in the output.
The space parameter is used to add whitespace and indentation to the JSON data. It can be a number or a string. A number specifies the number of spaces to use for indentation, and a string can be used to specify a custom indentation character.
Here’s an example of using JSON.stringify() with the space parameter:
const data = { name: "John", age: 30 };
const json = JSON.stringify(data, null, 2);
console.log(json);
In this example, passed 2 as the space parameter, which adds two spaces for indentation.
Using JSON.parse()
The JSON.parse() method is used to parse a JSON string and convert it into a JavaScript object. It also accepts a reviver function as an optional parameter, which can be used to transform the parsed data.
Here’s an example of using JSON.parse() with the JSON.stringify() method to pretty-print JSON data:
const data = { name: "John", age: 30 };
const json = JSON.stringify(data, null, 2);
const prettyJson = JSON.parse(json);
console.log(prettyJson);
In this example, first stringify the data object with JSON.stringify() and pass 2 as the space parameter to add two spaces for indentation. And then parse the resulting JSON string with JSON.parse() to convert it back into a JavaScript object.
Using External Libraries
There are also many external libraries available that provide more advanced options for pretty-printing JSON data. One popular library is prettier, which is a code formatter that supports many programming languages, including JavaScript.
To use prettier to format JSON data, you can install it using npm:
npm install --save-dev prettier
You can then use the prettier API to format JSON data as follows:
const prettier = require("prettier");
const data = { name: "John", age: 30 };
const json = JSON.stringify(data);
const formattedJson = prettier.format(json, {
parser: "json",
printWidth: 80,
tabWidth: 2,
useTabs: false,
});
console.log(formattedJson);
In this example, first stringify the data object with JSON.stringify(). And then use the prettier.format() method to format the resulting JSON string. To pass the `json
Conclusion
To pretty-printing JSON data is an essential practice for anyone working with JSON data, whether you’re a front-end developer, a back-end developer, or a data scientist. By adding indentation, line breaks, and whitespace to your JSON data, you can make it more readable and easier to understand. JavaScript provides built-in methods such as JSON.stringify() and JSON.parse() for pretty-printing JSON data, as well as external libraries like prettier. With our guide, you now have the knowledge and tools necessary to format your JSON data like a pro.
