JSON path picker

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 json-path-picker.js and json-path-picker.css in your application.

Plugin Usage

1. Create pre element for rendered tree output:

<pre id="json-renderer"></pre>

2. Create path target element:

<input id="path" type="text">

3. Call the jsonPathPicker() method and pass your JSON data and path target element selector (or jQuery object) as an arguments:

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

$('#json-renderer').jsonPathPicker(data, '#path');

Plugin Options

The jsonPathPicker method accepts an optional options object as a third 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 | '' | |

Example:

$('#json-renderer').jsonPathPicker(data, '#path', {
    outputWithQuotes: true,
    pathNotation: 'brackets',
    pathQuotesType: 'double'
});

Contributing

Feel free to post feature requests, create pull requests or report bugs.

Credits

JSON path picker is based on jQuery json-viewer plugin. Big thanks to Alexandre Bodelot for creating an awesome project!