Simple jQuery Plugin for Collapsible JSON Display | simpleJson

simple-collapsible-json-plugin

simpleJson is a simple jQuery plugin for collapsible Json rendering that can render complex JSON data as a nested, collapsible, and readable tree structure.

jquery treeview with json data example, json tree structure example, create json tree structure in javascript, convert json to tree javascript, collapsible tree structure in html

How to make use of it:

1. Insert the jQuery simpleJson plugin’s information into the web page.

<link rel="stylesheet" href="/path/to/css/simpleJson.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/simpleJson.js"></script>

2. Create a container to carry the JSON tree.

<div id="example"></div>

3. Initialize the plugin on the tree container and outline your personal JSON information as follows.

const myData = [
      {
        color: "red",
        value: "#f00"
      },
      {
        color: "green",
        value: "#0f0"
      },
      {
        color: "blue",
        value: "#00f"
      },
      {
        color: "cyan",
        value: "#0ff"
      },
      {
        color: "magenta",
        value: "#f0f"
      },
      {
        color: "yellow",
        value: "#ff0"
      },
      {
        color: "black",
        value: "#000"
      }
]
$("#example").empty().simpleJson({ 
  jsonObject: myData 
});

4. Customize the collapsed text.

$("#example").empty().simpleJson({ 
  jsonObject: myData,
  collapsedText: "......"
});

Options

The following options are available:

PropertyDescriptionRequired
jsonObjectThe object which should be renderedY
collapsedTextThe text which should be shown whilst an object has been collapsed (Defaults to ‘…’)N

Render JSON Data As Collapsible Tree, simpleJson Plugin/Github, json tree example, json to tree diagram, build treeview from json


See Demo And Download

Official Website(borsuksoftware): Click Here

This superior jQuery/javascript plugin is developed by borsuksoftware. For extra Advanced Usages, please go to the official website.