jQuery Plugin That Formats JSON Strings | jsonFormatter

json-formatter

jsonFormatter jQuery Plugin that formats JSON strings with support for syntax highlighting, collapsible hierarchical structure, and custom color schemes.

Must Read: Build HTML Forms From JSON Schema With Bootstrap | jsonform

How to make use of it:

1. Load the style sheet in the header section of the document.

<link href="jsonFormatter.min.css" rel="stylesheet">

2. Download jsonFormatter-darkTheme.min.css if you want to use a dark theme.

<link href="jsonFormatter-darkTheme.min.css" rel="stylesheet">

3. Call the plugin on the target element.

$('.demo').jsonFormatter();

4. Plugin options.

$('.demo').jsonFormatter({

// The number of spaces a tab
tab: '  ',

// Specifies if object's keys should be quoted in the formatted output.
quoteKeys: true,

// Specifies if arrays and objects are collapsible in the formatted output.
collapsible: true,

// Specifies if the original element is hidden. 
hideOriginal: true
});

Documentation

.jsonFormatter(options)

Returns: jQuery

Description: If the matched elements contain JSON, they are formatted to be easier to read. Arrays and objects are optionally collapsible.

Must Read: A jQuery Plugin To Submit Forms With Files via AJAX

Options

quoteKeys

Type: Boolean Default: true

Specifies if the object’s keys should be quoted in the formatted output.

collapsible

Type: Boolean Default: true

Specifies if arrays and objects are collapsible in the formatted output.

Must Read: A jQuery Plugin To Create A JSON Forms Editor Schema | json-edit.js

hideOriginal

Type: Boolean Default: true

Specifies if the original element is hidden. The element will only be hidden if it contains valid JSON that was successfully formatted.

See Demo And Download

Official Website(MHeironimus): Click Here

This superior jQuery/javascript plugin is developed by MHeironimus. For extra Advanced Usage, please go to the official website.