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:
| Property | Description | Required |
|---|---|---|
| jsonObject | The object which should be rendered | Y |
| collapsedText | The 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.