jQuery plugin for displaying JSON data with path picker feature
npm install json-path-pickerJSON path picker is an online tool that allows to transform JSON strings into HTML representations.
The main difference to other JSON viewers is that JSON path picker allows to find a path to the key by clicking an icon near to the key name.
This simplifies process of creating JSONPaths based on mocked responses.
JSON path picker can be also used in your app. Core features are packed as jQuery plugin. Read more about plugin installation, usage and options.
- Syntax highlighting
- Collapsible and expandable child nodes
- Clickable links
- Easily readable and minimal DOM structure
- Path picking
* Two path notations
* Three quote styles
* Key processing possibility (using RegExp)
Import json-path-picker.js and json-path-picker.css in your application.
1. Create pre element for rendered tree output:
``html`
2. Create path target element:
`html`
3. Call the jsonPathPicker() method and pass your JSON data and path target element selector (or jQuery object) as an arguments:`js
var data = {
"foobar": "foobaz"
};
$('#json-renderer').jsonPathPicker(data, '#path');
`
The jsonPathPicker method accepts an optional options object as a third argument.
| Option | Type | Default | Description |
|----------------------------|-----------|-----------------|----------------------------------------------------------|
| outputCollapsed | boolean | false | All nodes are collapsed. |false
| outputWithQuotes | boolean | | All keys in output HTML are surrounded with double quotation marks. Eg. {"foobar": 1} instead of {foobar: 1}. |'dots'
| pathNotation | string | | Path notation type. Accepts dots for dots notation (eg. example.in.dots.notation) and brackets for brackets notation (eg. ['example']['in']['brackets']['notation']). |'single'
| pathQuotesType | string | | |false
| processKeys | boolean | | |undefined
| keyReplaceRegexPattern | string | | |undefined
| keyReplaceRegexFlags | string | | |''
| keyReplacementText | string | | |
Example:
`js``
$('#json-renderer').jsonPathPicker(data, '#path', {
outputWithQuotes: true,
pathNotation: 'brackets',
pathQuotesType: 'double'
});