Interactive JSON

[PenchalaiahY]

Objective: To provide option to click event on particular primitive.

Change performed: Provided option termed clickablePrimitives

Example JSON:
jsonSource = {
data: [{
key1: "value1"
},{
key1: "value2"
}]
}

To make clickable key1 primitive, option can be configured as follows:
$(#jsondiv).jsonFrill({
clickablePrimitives: {
"data.key1": {
click: function(value) {
console.log("click event on value of data.key1: " + value);
}
}
}, jsonSource);

[sparuvu]

@PenchalaiahY Thanks for contributing.

Jsonfrill is meant just to format the json programatically. Trying to add functional behavior to the keys seems dangerous to me. It will be great if you could give me a usecase why you wanted this change.

[PenchalaiahY]

Our JSON had file path, on click of file path, a post request to be sent to server to download the file. Hence modified the jsonfrill to accommodate click events over primitives type of data. Click events are optional in this commit, if user didn't specified them in options. Click event only work on data not in keys, check following code jf-clickable class only added to value part not to the key part.

return '<div class="jf-prop jf-item ' + collapsedClass + ' " >'
 +                + getKey(key) + seperator + '<span class="jf-value jf-' + type +' jf-clickable ' + path.replace(/\./g,"-") + '">' + value + '</span></div>';

To add click events I used path generated by concatenating object keys, ignoring array keys (indexes).

for(var key in jf.settings.clickablePrimitives) {
   $("div#jf-formattedJSON ." + key.replace(/\./g,"-")).on("click", function() {
      jf.settings.clickablePrimitives[key].click($(this).text());
   });
}

I tried to searching for click events on json viewer online, could not able find one. Hence modified the jsonfrill to solve our usecase. I thought it might be useful to others who is trying to solve following usecases,

1. Html urls
2. File Paths
3. Any data drill down - means a data might require more analysis, hence on click of it programmer have flexibility to fetch more data about it.
4. Tree widget

I might say use cases are limitless.