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.