Beautiful JSON Viewer With Callback Support - jQuery JVC

JVC is a feature-rich JSON viewer plugin that transforms JSON objects, strings, and arrays into a beautifully structured, collapsible/expandable tree structure.

The plugin also supports callback functions which allow you to define and execute specific actions when a node in the tree is interacted with.

How to use it:

1. Include the jQuery JVC plugin's files on the web page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery JSON-viewer -->
<script src="/path/to/jvc.js"></script>
<link rel=stylesheet href="/path/to/jvc.css"/>

2. Create an empty container in which the plugin will render the JSON tree.

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

3. Prepare your JVS object as follows:

json = {
  // test object
  "testObject": {
    "null": null,
    "true": true,
    "false": false,
    "undefined": undefined,
    "text": "\"text&nbsp;'text'\t`text`<br>\ntext\"",
    "url": "http://example.com/",
    "array": [0, 0.1, 2, [], {}],
    "function": function(a,b){return a+b},
    "arrowFunction": (a,b)=>{return a-b}
  },
  // callbacks
  "ajaxCallback": {"jvc-cb": "/file.json"},
  "slowCallback": {"jvc-cb": "/slow"},
  "failCallback": {"jvc-cb": "/fail"},
  "longCallback": {"jvc-cb": "/long"}
};

4. Initialize the plugin on the JSON tree container and specify the callback function.

$('#example').JVC(json, {
  callback: jsonAjax
});

// callback function
var jsonAjax=function(event, element, data, cb){
    if(data=='/slow')return setTimeout(cb, 10*1000, ['json-slow']);
    //
    var ajax=data;
    if(typeof data==='string')var ajax={url:data,dataType:"json"};
    //
    $.ajax(ajax).done(cb)
    .fail(function(xhr, status, err){
      cb({"jvc-fail": status+' ('+(err? err :xhr.status)+')'})
    })
};

5. Print strings & arrays.

// print string
$('#example').JVC("Hello\n\tworld!<br>\n", {
  // options here
});

// print array
var myArray = [1, {"a": 3, "<br>\n": "<br>\n"}];
$('#example').JVC(myArray, {
  key: "obj", 
  withQuotes: true, 
  collapsed: true, 
  showJSON: true
});

6. Available options.

$('#example').JVC(json, {
  key: undefined, // // "str" or "obj"
  invertColors: false,
  withLinks: true,
  bigNumbers: false,
  withQuotes: false,
  withFunctions: true,
  collapsed: false,
  showConf: false,
  showJSON: false,
  debug: console.debug,
  error: console.error,
  callback: null,
  onChange: null
});

7. Setters, getters, and triggers.

// Tab-Size (spaces)
JVC.setTabSize(2);    

// Font-Size
JVC.setFontSize('12px');  

// Font-Family
JVC.setFontFamily('monospace'); 

// no-style, jvc-default, night-owl, etc. https://cdnjs.com/libraries/highlight.js
JVC.setStyle('night-owl');  

// JVC Getters:
var text=JVC.getJSON($('#example').get(0));

// JVC Triggers:
$('#example').on('JVC:callback',function(element,jvc_data,callback){callback([1,2,3])});
$('#example').on('JVC:change',function(doc){console.log(JVC.getJSON(doc))})  }

Changelog:

2023-05-25

• Update CSS

2023-05-18

• Added Setters and Getters

---

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