Jsonpath-picker-vanilla NPM

JSON path picker

Note: all this repository is a refactoring in Vanilla JS of piotros JQuery plugin.

JSON 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.

Features

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)

Plugin Installation

Import jsonpath-picker.min.js and jsonpath-picker.min.css in your application.

Plugin Usage

Create pre element for rendered tree output:
```
<pre id="json-renderer"></pre>
```
Create path target element:
```
<input class="path" type="text">
```

Call the render() method and pass your JSON data and path target element selector as an arguments:

var data = {
  "foobar": "foobaz"
};

source = document.querySelector('#json-renderer');
dest = document.querySelectorAll('.path');

// Browser
JPPicker.render(source, data, dests);

// Using Node require
const JPP = require('jsonpath-picker-vanilla');
JPPicker.render(source, data, dests);

Plugin Options

The render method accepts an optional options object as a 4th argument.

Option	Type	Default	Description
outputCollapsed	boolean	`false`	All nodes are collapsed.
outputWithQuotes	boolean	`false`	All keys in output HTML are surrounded with double quotation marks. Eg. `{"foobar": 1}` instead of `{foobar: 1}`.
pathNotation	string	`'dots'`	Path notation type. Accepts `dots` for dots notation (eg. `example.in.dots.notation`) and `brackets` for brackets notation (eg. `['example']['in']['brackets']['notation']`).
pathQuotesType	string	`'single'`
processKeys	boolean	`false`
keyReplaceRegexPattern	string	`undefined`
keyReplaceRegexFlags	string	`undefined`
keyReplacementText	string	`''`
pickerIcon	string	`#x1f4cb`	Hexa Unicode for picker Icon
WithoutPicker	boolean	`false`

Example:

source = document.querySelector('#json-renderer');
dest = document.querySelectorAll('.path');

// For Browser
JPPicker.render(source, data, dest, {
    outputWithQuotes: true,
    pathNotation: 'brackets',
    pathQuotesType: 'double'
});

// Using Node require
const JPP = require('jsonpath-picker-vanilla');
JPP.jsonPathPicker(source, data, dest, {
    outputWithQuotes: true,
    pathNotation: 'brackets',
    pathQuotesType: 'double'
});