Vue-annotated-json-tree-view NPM

Vue Annotated JSON Tree View

This is an extension of vue-json-tree-view to support "Annotated JSON".

JSON is pure data. Annotated JSON is a little extension that uses convention to add additional information into it. Common usages include:

comment
hint for presentation (e.g. different colors for different sections)

Annotated JSON does not change tree structure, it modifies key in place instead. For example, if this is an original JSON:

{"k": "v"}

The annotated one may look like this:

{"@k(class='red', comment='example')": "v"}

And that is it. If you are building a parser yourself, annotated key always starts with '@' and is followed by a parentheses with HTML-style attributes inside. If you strip them, it will be back to the original JSON.

This format is not governed by any committee. I just found it useful in many of my projects for keeping track of changes of a JSON document (building JSON diff for example).

Below are the original README:

Vue JSON Tree View

a demonstration

Demo and Blogpost

You can check out the demo on JSFiddle and read the Blogpost called Building a JSON Tree View Component in Vue.js from Scratch in Six Steps that lead to the creation of this library.

Installation

Install the plugin with npm:

npm install --save vue-json-tree-view

Then, in your Application JavaScript, add:

import TreeView from "vue-json-tree-view"
Vue.use(TreeView)

Done.

Usage

Put the tree-view element into your HTML where you want the Tree View to appear.

<div>
  <tree-view :data="jsonSource" :options="{maxDepth: 3}"></tree-view>
</div>

Props

`data`

The JSON to be displayed. Expects a valid JSON object.

`options`

The defaults are:

{
  maxDepth: 4,
  rootObjectKey: "root",
  modifiable: false
}

maxDepth: The maximum number of levels of the JSON Tree that should be expanded by default. Expects an Integer from 0 to Infinity.
rootObjectKey: the name of the Root Object, will default to root
modifiable: To modify the json value.

Event

updated json data

If modifiable is true and you want to take the updated json data, you must register event handler as v-on:change-data=.... Only one argument is passed that is updated data - data.

<div>
  <tree-view :data="jsonSource" :options="{modifiable: true}" @change-data="onChangeData"></tree-view>
</div>

// in your vue code
  ...
  methods: {
    onChangeData: function(data) {
      console.log(JSON.stringify(data))
    }
  },
  ...

Custom Styling

All leaves will have their type indicated as a CSS class, like tree-view-item-value-string. Supported types: String, Number, Function, Boolean and Null Values.