vue-json-pretty

What is vue-json-pretty?

vue-json-pretty is a Vue.js component for rendering JSON data in a pretty, formatted way. It is useful for displaying JSON data in a readable format with syntax highlighting and collapsible nodes.

What are vue-json-pretty's main functionalities?

Pretty JSON Rendering

This feature allows you to render JSON data in a visually appealing format. The component takes a JSON object as a prop and displays it with proper indentation and styling.

<template>
  <vue-json-pretty :data="jsonData" />
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: { VueJsonPretty },
  data() {
    return {
      jsonData: {
        name: "John Doe",
        age: 30,
        city: "New York"
      }
    };
  }
};
</script>

Collapsible Nodes

This feature allows you to collapse and expand nodes in the JSON structure. By setting the 'deep' prop, you can control the initial depth of expanded nodes, making it easier to navigate large JSON objects.

<template>
  <vue-json-pretty :data="jsonData" :deep="1" />
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: { VueJsonPretty },
  data() {
    return {
      jsonData: {
        name: "John Doe",
        details: {
          age: 30,
          city: "New York"
        }
      }
    };
  }
};
</script>

Other packages similar to vue-json-pretty

react-json-view

react-json-view is a React component for displaying JSON data in a similar pretty format with collapsible nodes. It offers more interactivity, such as editing JSON data directly in the view, which vue-json-pretty does not support.

jsoneditor

jsoneditor is a web-based tool that provides a tree view and code editor for JSON data. It is more feature-rich compared to vue-json-pretty, offering editing capabilities, search, and validation, but it is not specifically designed for Vue.js.

json-formatter-js

json-formatter-js is a standalone JavaScript library for rendering JSON in a collapsible tree format. It is framework-agnostic and can be used with any JavaScript project, whereas vue-json-pretty is specifically for Vue.js applications.

README

vue-json-pretty

A vue 2.x component for rendering JSON data as a tree structure.

• basic: JSON pretty
• advanced: get item data from JSON

Links

• Demo
• Github
• 中文文档

Install

npm install vue-json-pretty

Usage

<template>
  <div>
    ...
    <vue-json-pretty
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick">
    </vue-json-pretty>
  </div>
</template>

import VueJsonPretty from 'vue-json-pretty'

export default {
  components: {
    VueJsonPretty
  }
}

Props

• If you are using only the basic features (JSON pretty), just focus on the base properties.
• If you are using advanced features (get item data), you need to focus on the base and advanced attributes.

Attribute	Level	Description	Type	Default
data	basic	json data	JSON object	-
deep	basic	data depth, data larger than this depth will not be expanded	number	Infinity
path	advanced	root data path	string	root
pathChecked	advanced	defines the selected data path	array	[]
pathSelectable	advanced	defines whether a data path supports selection	Function(itemPath, itemData)	-
selectableType	advanced	defines the selected type, this feature is not supported by default	enum: both, checkbox, tree	-

Events

• The following events are base on advanced features.

Event Name	Description	Callback Parameters
click	triggered when a data item is clicked	(path, data)