jsonv

Jsonv is a viewer & editor interface for JSON data. It supports toggling, pagination, and basic operations on JSON data both graphically and programmatically. It is available as a browser extension from the Chrome Web Store.

• Set simple values
• Set JSON values
• Edit values
• Delete values
• Insert into an array

Installation

To install jsonv, include the stylesheet and script in your page and call jsonv with the container element and json data.

<!-- in head tag -->
<link rel="stylesheet" href="//jsonv.kganser.com/jsonv.css">

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

<!-- before closing body tag -->
<script src="//jsonv.kganser.com/jsonv.js"></script>
<script>
  jsonv(document.getElementById('json'), {
    movies: {
      'batman': {title: 'Batman', rating: 7.6, year: 1989},
      'batman-returns': {title: 'Batman Returns', rating: 7, year: 1992}
    },
    series: ['batman', 'batman-returns', 'batman-forever']
  });
</script>

Configuration

Jsonv accepts an optional configuration object as its third argument:

{
  listener:  // function
  editor:    // boolean, defaults to false
  collapsed: // boolean, defaults to false
  metadata:  // boolean, defaults to false
}

If metadata is true, objects and arrays within the json data should be wrapped in a metadata object as follows. Metadata allows for pagination and fine-grained collapsed states.

{
  data:      // original object or array
  remaining: // optional boolean or integer count of remaining elements in a paginated object or array
  collapsed: // boolean; object is collapsed if this or the global collapsed setting is true
}

A listener function receives events from actions taken on the jsonv UI in the following format:

function(type, path, value, callback)

Values for type can be get, put, insert, delete, or toggle. The event's path is an array of strings and numeric indices. For put and insert events, value is the input json data; for get events (used for pagination), value is the last currently displayed key or element in the object or array; for toggle events, value is true if expanded and false if collapsed.

A callback of the form function(error:boolean, value:json) is available to listener for get, put, insert, and delete events to return relevant data. If the operation is performed asynchronously, listener should return true to indicate that callback will be issued at a later time.

API

Calling jsonv returns an object that gives programmatic access to the jsonv UI. Below, path is an array of keys and numeric indices, and objects and arrays in value must be wrapped in metadata objects if metadata is enabled on the jsonv instance.

{
  get:    function(path:array),
  delete: function(path:array),
  put:    function(path:array, value:json),
  insert: function(path:array, value:json),
  toggle: function(path:array, expanded:boolean|undefined)
}

Demo

Below is a jsonv editor demo with pagination. UI events are logged to the right.

[command] [path] [value]