Annotated JSON Tree View Component in Vue.js
npm install vue-annotated-json-tree-viewJSON 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:
``javascript`
{"k": "v"}
The annotated one may look like this:
`javascript`
{"@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:
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.
Install the plugin with npm:
`shell`
npm install --save vue-json-tree-view
Then, in your Application JavaScript, add:
`javascript`
import TreeView from "vue-json-tree-view"
Vue.use(TreeView)
Done.
Put the tree-view element into your HTML where you want the Tree View to appear.`html`
#### data
The JSON to be displayed. Expects a valid JSON object.
#### options
The defaults are:
``
{
maxDepth: 4,
rootObjectKey: "root",
modifiable: false
}root
- 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
- modifiable: To modify the json value.
#### 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.`html
// in your vue code
...
methods: {
onChangeData: function(data) {
console.log(JSON.stringify(data))
}
},
...
`
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.
Enjoy.
- 2.0.0: Moved prop based option into options` object. Added CSS for leaf types. Support for raw values as data.
- 1.0.0: Initial Release