Simple jQuery Plugin for Collapsible JSON Display

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