// jQuery Plugin that converts a JSON string into an HTML formatted string with // optionally collapsible members. // // Based on example from http://bodurov.com/JsonFormatter/. // // Version 1.0.1 2015-02-28 //------------------------------------------------------------------------------ (function ($) { $.fn.jsonFormatter = function (options) { // Private Fields var _defaultOptions = { tab: ' ', quoteKeys: true, collapsible: true, hideOriginal: true }; var _settings; var _dateObj = new Date(); var _regexpObj = new RegExp(); // Private Functions var _getRow = function (indent, data, isPropertyContent) { var tabs = ""; for (var i = 0; i < indent && !isPropertyContent; i++) tabs += _settings.tab; if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") data = data + "\n"; return tabs + data; }; var _formatFunction = function (indent, obj) { var tabs = ""; for (var i = 0; i < indent; i++) tabs += _settings.tab; var funcStrArray = obj.toString().split("\n"); var str = ""; for (var i = 0; i < funcStrArray.length; i++) { str += ((i == 0) ? "" : tabs) + funcStrArray[i] + "\n"; } return str; }; var _formatLiteral = function (literal, quote, comma, indent, isArray, style) { if (typeof literal == 'string') literal = literal.split("<").join("<").split(">").join(">"); var str = "" + quote + literal + quote + comma + ""; if (isArray) str = _getRow(indent, str); return str; }; var _processObject = function (obj, indent, addComma, isArray, isPropertyContent) { var html = ""; var comma = (addComma) ? ", " : ""; var type = typeof obj; var clpsHtml = ""; if ($.isArray(obj)) { if (obj.length == 0) { html += _getRow(indent, "[ ]" + comma, isPropertyContent); } else { clpsHtml = _settings.collapsible ? "" : ""; html += _getRow(indent, "[" + clpsHtml, isPropertyContent); for (var i = 0; i < obj.length; i++) { html += _processObject(obj[i], indent + 1, i < (obj.length - 1), true, false); } clpsHtml = _settings.collapsible ? "" : ""; html += _getRow(indent, clpsHtml + "]" + comma); } } else if (type == 'object') { if (obj == null) { html += _formatLiteral("null", "", comma, indent, isArray, "jsonFormatter-null"); } else if (obj.constructor == _dateObj.constructor) { html += _formatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString() + "*/", "", comma, indent, isArray, "Date"); } else if (obj.constructor == _regexpObj.constructor) { html += _formatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp"); } else { var numProps = 0; for (var prop in obj) numProps++; if (numProps == 0) { html += _getRow(indent, "{ }" + comma, isPropertyContent); } else { clpsHtml = _settings.collapsible ? "" : ""; html += _getRow(indent, "{" + clpsHtml, isPropertyContent); var j = 0; for (var prop in obj) { var quote = _settings.quoteKeys ? "\"" : ""; html += _getRow(indent + 1, "" + quote + prop + quote + ": " + _processObject(obj[prop], indent + 1, ++j < numProps, false, true)); } clpsHtml = _settings.collapsible ? "" : ""; html += _getRow(indent, clpsHtml + "}" + comma); } } } else if (type == 'number') { html += _formatLiteral(obj, "", comma, indent, isArray, "jsonFormatter-number"); } else if (type == 'boolean') { html += _formatLiteral(obj, "", comma, indent, isArray, "jsonFormatter-boolean"); } else if (type == 'function') { if (obj.constructor == _regexpObj.constructor) { html += _formatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp"); } else { obj = _formatFunction(indent, obj); html += _formatLiteral(obj, "", comma, indent, isArray, "jsonFormatter-function"); } } else if (type == 'undefined') { html += _formatLiteral("undefined", "", comma, indent, isArray, "jsonFormatter-null"); } else { html += _formatLiteral(obj.toString().split("\\").join("\\\\").split('"').join('\\"'), "\"", comma, indent, isArray, "jsonFormatter-string"); } return html; }; var _formatElement = function (element) { var json = $(element).html(); if (json.trim() == "") json = "\"\""; try { var obj = eval("[" + json + "]"); } catch (exception) { // Do not format if it is not valid JSON. return; } html = _processObject(obj[0], 0, false, false, false); var original = $(element).wrapInner("
"); if (_settings.hideOriginal === true) { $(".jsonFormatter-original", original).hide(); } original.append("
" + html + "
"); }; var _expandImageClicked = function (event) { var container = $(this).next(); if (container.length < 1) return; if ($(this).hasClass('jsonFormatter-expanded') == true) { container.hide(); $(this).removeClass('jsonFormatter-expanded').addClass('jsonFormatter-collapsed'); } else { container.show(); $(this).removeClass('jsonFormatter-collapsed').addClass('jsonFormatter-expanded'); } }; //-------------------------------------------------------------------------- // Determine options to use. _settings = $.extend(_defaultOptions, options); // Format each code block. return this.each(function (index, element) { // Format JSON _formatElement(element); // Add Expander Click Event Handler $(element).on('click', '.jsonFormatter-expander', _expandImageClicked); }); }; // $.fn.jsonFormatter }(jQuery));