
jQuery pretty-print-json is a web-based tool used to format/beautify JSON data and colorize key/value pairs depending on the data type.
1. Install & import.
# NPM $ npm install pretty-print-json --save
// ES 6 import prettyPrintJson from 'pretty-print-json';
2. Or load the pretty-print-json.js
and pretty-print-json.css
in the webpage which has jQuery library installed.
<link rel="stylesheet" href="pretty-print-json.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="pretty-print-json.js"></script>
3. Create a container to display the formatted JSON.
<pre id="example"></pre>
4. Beatufity and output the JSON you provide.
const myData = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } };
$('#example').html(prettyPrintJson.toHtml(myData));
This awesome jQuery plugin is developed by center-key. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 24.11.2018
- Source