simpleJson is a simple jQuery plugin for collapsible Json rendering that can render complex JSON data as a nested, collapsible, and readable tree structure.
javascript css image file To use the plugin, simply include the above 3 files in your project (note that depending on where you place the image file on your site, it may be necessary to update the css file accordingly) and ensure that the javascript file is included after adding jQuery ( pretty much any version of jQuery will do).
Must Read: A Collapsible jQuery Menu jQuery Plugin For Bootstrap
How to make use of it:
1. Insert the jQuery simpleJson
plugin’s information on 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:
Must Read: Minimalist Simple Open-Source Palm Tree CSS Library
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 |
See Demo And Download

Official Website(borsuksoftware): Click Here
This superior jQuery/javascript plugin is developed by borsuksoftware. For extra Advanced Usage, please go to the official website.