fitzhavey/vue-json-tree-view

A JSON Tree View Component for Vue.js

Vue JSON Tree View

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,
  link: false,
  limitRenderDepth: 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.
• link: URL strings will appear as clickable links (unless modifiable="true").
• limitRenderDepth: maximum number of nodes that should be rendered (for very large JSONs)

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.

Keys can also be styled. For instance to make labels red:

.tree-view-item-key {
    color: red;
}

Contributing

Contributions to this repo are very welcome as they are what has helped it become what it is today. Simply raise an issue with new ideas or submit a pull request.

A github action automatically deploys changes when they are merged into the master branch.

vue-json-tree-view's Issues

not support SSR: `window is not defined`

not support SSR: window is not defined.

Would anyone like to manage this repo?

There have been some great change requests and a couple fantastic PRs. Unfortunately I've found myself too busy to manage releases in a reasonable timeframe - if anyone else would like to take over from me please comment below.

Request for Enhanced Feature - Detailed View for Specific Key in JSON Tree

Hello,

I would like to propose an enhancement to the Vue JSON Tree View library. Currently, it offers an excellent way to visualize JSON data in a tree view. However, I have a specific requirement for an expanded view of a particular key within the JSON data.

Feature Description:

I suggest the addition of a feature that allows users to specify a key within their JSON data. Once this key is provided, the library should display the details and expand that specific key within the host object. This would provide a more focused and detailed view of the data, making it easier to analyze and work with specific parts of the JSON structure.

This feature would greatly enhance the utility of the Vue JSON Tree View, especially for users who need to work with large and complex JSON datasets.

Select Node Event

Hi, is there any way to get the node data which I clicked ?
I used $emit method but it not work.

How to apply CSS style on key ? any demo or guideline?

New option: Collapsed view at first view

Hi there,
I think having an option for the "root" of json data to start in the collapsed view could be useful in some situations. Ideally, once the viewer opens the root, everything else in it would be in expanded view.

Currently, if I don't exactly know what json data will be fed into the tree view, it can cause a bit of inconvenience in the rest of the webpage, since everything will be shifted down by an unknown amount of distance.

Package doesn't work without template compiler?

First I tried this:

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

Which gave the error "You are using the runtime-only build of Vue where the template compiler is not available..."
So I tried this instead:

import TreeView from "vue-json-tree-view/dist/vue-json-tree-view.min.js"
Vue.use(TreeView)

But I still get the same error.

Feature request: auto install in browser

I'd like to load this lib from CDN. If it can auto install it'll be very nice.

Something like this in src/index.js:

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

Unknown custom element: <tree-view>

Thank you for suh a great library, but I followed the steps yet I still recieve this error, any help?

Unknown custom element: <tree-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Thank you in advance 👍

Looking for project maintainer

If anyone wants to take over maintenance of the project, please reach out.

XSS injection risk

Hi,

I want to raise a potential security risk with the use of the package.

When showing json, if a json key contains HTML (ex: ), the expression is executed.

This makes it vulnerable to XSS injections.

In my opinion this should be solved by some sort of sanitization or strong warning in the documentation.

Kind regards

Q: Any ideas on custom templates?

I am trying to build a Tree component as well. This has come in very handy as reference!

But I'd like to support custom TreeViewItem templates (i.e., get a slot in there). Any ideas on how to take a template defined in the TreeView component and pass it into the child TreeViewItem?

Rendering HTML leads to XSS vulnerability

In the TreeViewItemValue component there's a XSS vulnerability due to the fact that the package is using v-html to render JSON values which is a major issue.

This will cause the browser to render the content. If one uses the package to render, say, the response of a remote API. If said API returns HTML including JavaScript, the use of v-html will in fact render the content enabling an attacker to run JS code.

There is no reason to ever use v-html to render a simple JSON value.

Add CSP support

vue-json-tree-view.min.js is blocked by CSP (Content Security Policy) because is using "eval", wich should be avoid.

Further read:

1. https://developers.google.com/web/fundamentals/security/csp/
2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#sources

error:

Hello, JSON data is not highlighted

Hello, JSON data is not highlighted

Typescript Support - Missing @types

Please add typings @types/vue-json-tree-view, so Typescript works out-of-the-box.

dist in 2.1.2 broken

After upgrade from 2.1.1 to 2.1.2 I get an error in console

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <TreeView>

and component not working anymore

Domain digimondo.io doesn't exist

URL: https://devblog.digimondo.io/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps-ce0c05c2fdd8#.dkwh4jo2m

What causes the duplicate key

vue.esm.js?efeb:576 [Vue warn]: Duplicate keys detected: '"ip_list":'. This may cause an update error.

found in

---> <TreeViewItem> at src/TreeViewItem.vue
       <TreeView> at src/TreeView.vue
         <ElFormItem>
           <ElForm>
             <TableBody>
               <ElTable>
                 <SessionTable> at src\components\table\ExpandTable.vue
                   <Session> at src\pages\userAction\Session.vue
                     <Index> at src\pages\index\Index.vue
                       <App> at src\App.vue
                         <Root>

But the page is normally rendered.

<el-form
  label-position="left"
  inline
  class="table-expand"
  flex="wrap:wrap">
  <el-form-item
    v-for="(item, index) in defaultShow"
    v-if="item.prop === 'ip_list' || item.prop === 'param' || item.prop === 'exception_message'"
    :label="item.name"
    :key="index"
    flex="dir:top">

    <div v-if="item.prop === 'ip_list'">
      <tree-view
        :data="JSON.parse(scope.row.ip_list)"
        :options="{ rootObjectKey: 'ip_list', maxDepth: 0 }"
        :key="1">
      </tree-view>
    </div>

  </el-form-item>
</el-form>

Configuring rootObjectKey for other values is the same issue.

my package.json is

  "dependencies": {
    "axios": "^0.17.1",
    "echarts": "^3.8.5",
    "element-ui": "^2.0.8",
    "vue": "^2.5.9",
    "vue-json-tree-view": "^2.1.1",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

Vuex Implementation

Could you please show / add an example about Vuex implementation to check how to mutate grand child data? without using / changing props?

Thank you

feat: Support for value formatting

In particular, i'd like to make links clickable within the json tree. Adding support for a decorator method on the values would allow this and more. I'll try and implement this myself and get a PR in.

Hide Root Key

I'd like to know if its possible to hide the root key by default

json can't parse

sampleData: ["{\"timestamp\":\"2019-02-12T10:20:32.550+0300\",\"record\":{\"position\":-1,\"header\":{\"digest\":null,\"version\":null,\"contentLength\":292,\"date\":\"2013-05-18T08:38:55Z\",\"headerFields\":{\"reader-identifier\":\"crawl-data/CC-MAIN-2013-20/segments/1368696381630/warc/CC-MAIN-20130516092621-00000-ip-10-60-113-184.ec2.internal.warc.gz\",\"WARC-IP-Address\":\"184.154.38.27\",\"absolute-offset\":152576079,\"WARC-Target-URI\":\"http://mocanomi.org/product/roberto-juarez-a-sense-of-place/?add-to-cart=4734&_n=87beaddeca\",\"WARC-Warcinfo-ID\":\"<urn:uuid:b736a179-817d-4f61-b1de-58c80ec9d549>\",\"WARC-Date\":\"2013-05-18T08:38:55Z\",\"Content-Length\":\"292\",\"WARC-Record-ID\":\"<urn:uuid:a27442d4-32ea-42f4-a8fb-56d1634056c5>\",\"WARC-Type\":\"request\",\"Content-Type\":\"application/http; msgtype=request\"},\"mimetype\":\"application/http; msgtype=request\",\"contentBegin\":-1,\"recordIdentifier\":null,\"url\":\"http://mocanomi.org/product/roberto-juarez-a-sense-of-place/?add-to-cart=4734&_n=87beaddeca\",\"headerFieldKeys\":[\"reader-identifier\",\"WARC-IP-Address\",\"absolute-offset\",\"WARC-Target-URI\",\"WARC-Warcinfo-ID\",\"WARC-Date\",\"Content-Length\",\"WARC-Record-ID\",\"WARC-Type\",\"Content-Type\"],\"readerIdentifier\":\"crawl-data/CC-MAIN-2013-20/segments/1368696381630/warc/CC-MAIN-20130516092621-00000-ip-10-60-113-184.ec2.internal.warc.gz\",\"length\":291,\"offset\":152576079},\"digestStr\":null,\"strict\":false},\"project\":\"cn-warc\",\"type\":\"warc\"}"],

js fiddle link
https://jsfiddle.net/aoLbpwr8/

Bundle size is over 80KB

https://bundlephobia.com/[email protected]

This component is really heavy because it bundles in lodash.

I've created a similar component to this which is 8KB with no dependencies: https://github.com/tylerkrupicka/vue-json-component

If you need any help updating this package I can look at contributing.

Default all nodes collapsed

Hey there, nice work :-)

Is there a setting to have the data collapsed to begin with?

JSFiddle Example does not work

https://jsfiddle.net/arvidkahl/kwo6vk9d/11/

After "Run" button pressing there is such error:

Uncaught ReferenceError: Vue is not defined
    at <anonymous>:3:1
    at run (babel.js:60802)
    at check (babel.js:60868)
    at loadScripts (babel.js:60909)
    at runScripts (babel.js:60936)
    at transformScriptTags (babel.js:324)

Overwrite all defaults on register the component globally

It would be nice if this is possible:

import Vue from 'vue';
import TreeView from 'vue-json-tree-view';

Vue.use(TreeView, { maxDepth: 0 }); <------- overwrite the defauls here

Can you add color to the label

component lists rendered with v-for should have explicit keys.

[Vue tip]: : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
(found in <TreeViewItem>)

Using:

vue: V2.2.0
vue-json-tree-view: V2.0.3

Created a Chrome Extension like JSONView using VueJS and vue-json-tree-view . Here is my Repo

t.component is not a function when using Tree View

When importing and using Tree View with Vue 2.5.11 I get the following error right off the bat:

It seems to come from this line of (minified, why? why?) JS:

t.exports=function(t){t.component("tree-view-item-value",i.default),t.component("tree-view-item",a.default),t.component("tree-view",c.default)}

..which seems to correspond to this code. Any idea why this might be happening?

As an aside, I don't think that an NPM module should be published as minified JS. It makes debugging impossible, and most bundlers can do the minification afterward. Also it can introduce incompatibilities between different transpilers. #

Shorten large values

Hi,

Is it possible to make it so that long values can be shortened with an ellipsis that, when clicked, will expand the value?

Thanks

Modifiable and data update in input fileds

If JSON data is changed on parent (e.x. reloaded from server) and when modifiable==true, then input value is not updated.