JSON formater

JavaScript function called `JSONFormat` that converts JSON data into a formatted HTML string with syntax highlighting. It uses recursive functions to handle different data types like strings, numbers, arrays, and objects, applying CSS classes for color-coded display. The code also includes a method to dynamically load the required CSS styles into the webpage.

json.format.js This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters Show hidden characters var JSONFormat = function { var toString = Object.prototype.toString; function format object, indent count { var html fragment = ''; switch typeof object { case 'Null' :0 html fragment = format null object ; break; case 'Boolean' : html fragment = format boolean object ; break; case 'Number' : html fragment = format number object ; break; case 'String' : html fragment = format string object ; break; case 'Array' : html fragment = format array object, indent count ; break; case 'Object' : html fragment = format object object, indent count ; break; } return html fragment; }; function format null object { return '<span class="json null" null</span '; } function format boolean object { return '<span class="json boolean" ' + object + '</span '; } function format number object { return '<span class="json number" ' + object + '</span '; } function format string object { if 0 <= object.search /^http/ { object = '<a href="' + object + '" target=" blank" class="json link" ' + object + '</a ' } return '<span class="json string" "' + object + '"</span '; } function format array object, indent count { var tmp array = ; for var i = 0, size = object.length; i < size; ++i { tmp array.push indent tab indent count + format object i , indent count + 1 ; } return ' \n' + tmp array.join ',\n' + '\n' + indent tab indent count - 1 + ' '; } function format object object, indent count { var tmp array = ; for var key in object { tmp array.push indent tab indent count + '<span class="json key" "' + key + '"</span :' + format object key , indent count + 1 ; } return '{\n' + tmp array.join ',\n' + '\n' + indent tab indent count - 1 + '}'; } function indent tab indent count { return new Array indent count + 1 .join ' ' ; } function typeof object { var tf = typeof object, ts = toString.call object ; return null === object ? 'Null' : 'undefined' == tf ? 'Undefined' : 'boolean' == tf ? 'Boolean' : 'number' == tf ? 'Number' : 'string' == tf ? 'String' : ' object Function ' == ts ? 'Function' : ' object Array ' == ts ? 'Array' : ' object Date ' == ts ? 'Date' : 'Object'; }; function loadCssString { var style = document.createElement 'style' ; style.type = 'text/css'; var code = Array.prototype.slice.apply arguments .join '' ; try{ style.appendChild document.createTextNode code ; }catch ex { style.styleSheet.cssText = code; } document.getElementsByTagName 'head' 0 .appendChild style ; } loadCssString '.json key{ color: purple;}', '.json null{color: red;}', '.json string{ color: 077;}', '.json link{ color: 717171;}', '.json array brackets{}' ; var JSONFormat = function origin data { this.data = 'string' = typeof origin data ? origin data : JSON && JSON.parse ? JSON.parse origin data : eval ' ' + origin data + ' ' ; }; JSONFormat.prototype = { constructor : JSONFormat, toString : function { return format this.data, 1 ; } } return JSONFormat; } ; function create result contatiner { var $result = $ '<pre id="result" style=" width: 100%; height: 100%; overflow: scroll; overflow-x: scroll; overflow-y:scroll" </pre ' var $result container = $ '<div id="result container" style="position: fixed; top: 1%; right: 8px; width: 5%; height: 97%; margin: 0; padding: 0; border:1px solid skyblue; background: f8f8f8; line-height: 1.2em; font-size: 14px; cursor: pointer;" </div ' ; $result container.append $result ; $result container.hover function { $ this .stop true .animate {width:'50%'}, 'slow' ; }, function { $ this .stop true .animate {width:'5%'}, 'slow' ; } ; $ 'body' .append $result container ; return $result container, $result ; } function request intercept args { var $result container = args 0 , $result = args 1 ; $ 'form type="submit" ' .bind 'click', function { var form = $ this .parents 'form' , action = form.attr 'action' || './' , method = form.attr 'method' || 'get' .toLowerCase , params = {}; form.find 'input type="text" ' .each function { var item = $ this ; params item.attr 'name' = item.val ; } ; $ 'get' == method ? 'get' : 'post' action, params, function response { try{ var j = new JSONFormat JSON && JSON.parse ? JSON.parse response : eval ' ' + response + ' ' ; $result.html j.toString ; }catch e { $result.html $result.text response .html ; } $result container.stop true .animate {width:'50%'}, 'slow' ; } ; return false; } ; } create result contatiner ;