Press "Enter" to skip to content

JavaScript Library to Pretty Print JSON Data to HTML | pretty-print-json

Format JSON Data With Colored Syntax – jQuery pretty-print-JSON is a web-based instrument used to format/beautify JSON information and colorize key/worth pairs relying on the information kind.

A JavaScript library to print JSON data to HTML for rich color display.

How to make use of it:

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 within the webpage which has jQuery library put in.

<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 show the formatted JSON.

<pre id="example"></pre>

4. Beauty and output the JSON you present.

const myData = { 
      "name":"John",
      "age":30,
      "cars": {
        "car1":"Ford",
        "car2":"BMW",
        "car3":"Fiat"
      } 
};
$('#example').html(prettyPrintJson.toHtml(myData));

JSON data to HTML table using jquery, JSON Data with Color Syntax, print JSON plugin/Github

Changelog:

2019-12-13

  • v0.2.0: Provide UI suggestions for a copy to clipboard

2019-12-12

  • v0.1.5: Add color for the null worth.

2019-12-01

  • v0.1.3: Prevent autofocus cell zoom making web page too large

2019-10-27

  • v0.1.2: Prevent autofocus cell zoom making web page too large

2019-10-20

  • v0.1.1:¬†Intermediate keyName calculation for readability

2019-04-24

  • Fix for prototype air pollution vulnerability

2019-02-10

  • v0.0.6:¬†Fix for quotes within quotes

2019-01-27

  • Replace deprecated occasion shortcut function

See Demo And Download

Official Website(center-key): Click Here

This superior jQuery/javascript plugin is developed by center-key. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.