jpv
jsonpath-picker-vanilla
npm i jsonpath-picker-vanilla
jpv

jsonpath-picker-vanilla

Refactoring in Vanilla JS of https://github.com/piotros/json-path-picker

by Oscar MARIE--TAILLEFER

1.2.4 (see all)License:MITTypeScript:Not Found
npm i jsonpath-picker-vanilla
Readme

npm version Total alerts Language grade: JavaScript Greenkeeper badge

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

  1. Create pre element for rendered tree output:

    <pre id="json-renderer"></pre>
    
  2. Create path target element:

    <input class="path" type="text">
    
  3. 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.

OptionTypeDefaultDescription
outputCollapsedbooleanfalseAll nodes are collapsed.
outputWithQuotesbooleanfalseAll keys in output HTML are surrounded with double quotation marks. Eg. {"foobar": 1} instead of {foobar: 1}.
pathNotationstring'dots'Path notation type. Accepts dots for dots notation (eg. example.in.dots.notation) and brackets for brackets notation (eg. ['example']['in']['brackets']['notation']).
pathQuotesTypestring'single'
processKeysbooleanfalse
keyReplaceRegexPatternstringundefined
keyReplaceRegexFlagsstringundefined
keyReplacementTextstring''
pickerIconstring#x1f4cbHexa Unicode for picker Icon
WithoutPickerbooleanfalse

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'
});

Contributing

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

Credits

JSON path picker is based on jQuery json-path picker plugin. Big thanks to Piotr 'piotros' Baran for creating an awesome project!

Downloads/wk

347

GitHub Stars

11

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.2.4
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial