jsontree.js

!function ($) {
  "use strict"; // jshint ;_;

  var _render = function(obj, p){
    var parent = $(p);
    var ic = 0;
    var count = 0 ;
    for (var key in obj) {
      if (!obj.hasOwnProperty(key)){
        continue;
      }
      count+=1;
    }

    for (var key in obj) {
      if (!obj.hasOwnProperty(key)){
        continue;
      }
      ic +=1;
      var coma = '';
      if (ic < count){
        coma = ',';
      }
      if (obj[key] === null){
        parent.append('<li><span class="key">'+key+':</span><span class="null"> null </span>'+coma+'</li>');
      } else if (typeof obj[key] === 'boolean'){
        parent.append('<li><span class="key">'+key+':</span><span class="boolean">'+obj[key]+'</span>'+coma+'</li>');
      } else if (typeof obj[key] === 'number'){
        parent.append('<li><span class="key">'+key+':</span><span class="number">'+obj[key]+'</span>'+coma+'</li>');
      } else if (typeof obj[key] === 'string'){
        parent.append('<li><span class="key">'+key+':</span><span class="string">"'+obj[key]+'"</span>'+coma+'</li>');
      } else if ($.isArray(obj[key])) {
        var arval = $('<li><span class="key">'+key+':</span><span class="fold">[</span><ul class="array"></ul><span>]</span>'+coma+'</li>');
        parent.append(arval);
        arval.find('.unfold').data('card', _render(obj[key], arval.find('.array'))) ;
      }else{
        var oval = $('<li><span class="key">'+key+':</span><span class="fold">{</span><ul class="object"></ul><span>}</span>'+coma+'</li>');
        parent.append(oval);
        oval.find('.unfold').data('card', _render(obj[key], oval.find('.object')));
      }
    }
    return ic;
  };

  $(document).on("click", '.jsontree .fold', function(e){
    e.preventDefault();
    $(this).addClass('folded').parent().find('ul').slideUp();
  });

  $(document).on('click', '.jsontree .fold.folded', function(e){
    e.preventDefault();
    $(this).removeClass('folded').parent().find('ul').slideDown();
  });

  var JsonTree = function(self){
    var j = $.parseJSON(self.data('jsontree'));
    self.append('<ul class="jsontree"></ul>');
    _render([j], self.find('.jsontree'));
  };

  $.fn.jsontree = function (option) {
    return this.each(function () {
      var self = $(this), data = self.data('jsontree');
      if (!data) {
        if (typeof option == 'string') {
          data = option;
          self.data('jsontree', option);
        }else{
          data = {};
          self.data('jsontree', '');
        }
      }
      new JsonTree(self);
    });
  };

}(window.jQuery);