Render JSON Data As Collapsible Tree - jQuery simpleJson

A simple and fast JSON viewer plugin that can present complex JSON data as a nested, collapsible, human-readable tree structure.

See Also:

• 10 Best JSON Viewer Tools To Format JSON Strings
• 10 Best Online JSON Data Converters In JavaScript
• 10 Best Tree View Plugins In JavaScript And Pure CSS

How to use it:

1. Insert the jQuery simpleJson plugin's files into the 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 hold the JSON tree.

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

3. Initialize the plugin on the tree container and define your own JSON data 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 collpased text. Default: '...'.

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

---

This awesome jQuery plugin is developed by borsuksoftware. For more Advanced Usages, please check the demo page or visit the official website.