!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);