{"slug": "json-formater", "title": "JSON formater", "summary": "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.", "body_md": "json.format.js\n\n      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.\n      \nLearn more about bidirectional Unicode characters\n\n \n    Show hidden characters\n\nvar JSONFormat = (function(){\n\n  var _toString = Object.prototype.toString;\n\n  function format(object, indent_count){\n\n    var html_fragment = '';\n\n    switch(_typeof(object)){\n\n      case 'Null' :0\n\n        html_fragment = _format_null(object);\n\n        break;\n\n      case 'Boolean' :\n\n        html_fragment = _format_boolean(object);\n\n        break;\n\n      case 'Number' :\n\n        html_fragment = _format_number(object);\n\n        break;\n\n      case 'String' :\n\n        html_fragment = _format_string(object);\n\n        break;\n\n      case 'Array' :\n\n        html_fragment = _format_array(object, indent_count);\n\n        break;\n\n      case 'Object' :\n\n        html_fragment = _format_object(object, indent_count);\n\n        break;\n\n    }\n\n    return html_fragment;\n\n  };\n\n  function _format_null(object){\n\n    return '<span class=\"json_null\">null</span>';\n\n  }\n\n  function _format_boolean(object){\n\n    return '<span class=\"json_boolean\">' + object + '</span>';\n\n  }\n\n  function _format_number(object){\n\n    return '<span class=\"json_number\">' + object + '</span>';\n\n  }\n\n  function _format_string(object){\n\n    if(0 <= object.search(/^http/)){\n\n      object = '<a href=\"' + object + '\" target=\"_blank\" class=\"json_link\">' + object + '</a>'\n\n    }\n\n    return '<span class=\"json_string\">\"' + object + '\"</span>';\n\n  }\n\n  function _format_array(object, indent_count){\n\n    var tmp_array = [];\n\n    for(var i = 0, size = object.length; i < size; ++i){\n\n      tmp_array.push(indent_tab(indent_count) + format(object[i], indent_count + 1));\n\n    }\n\n    return '[\\n'\n\n        + tmp_array.join(',\\n')\n\n        + '\\n' + indent_tab(indent_count - 1) + ']';\n\n  }\n\n  function _format_object(object, indent_count){\n\n    var tmp_array = [];\n\n    for(var key in object){\n\n      tmp_array.push( indent_tab(indent_count) + '<span class=\"json_key\">\"' + key + '\"</span>:' + format(object[key], indent_count + 1));\n\n    }\n\n    return '{\\n'\n\n        + tmp_array.join(',\\n')\n\n        + '\\n' + indent_tab(indent_count - 1) + '}';\n\n  }\n\n  function indent_tab(indent_count){\n\n    return (new Array(indent_count + 1)).join('   ');\n\n  }\n\n  function _typeof(object){\n\n    var tf = typeof object,\n\n        ts = _toString.call(object);\n\n    return null === object ? 'Null' :\n\n        'undefined' == tf ? 'Undefined' :\n\n            'boolean' == tf ? 'Boolean' :\n\n                'number' == tf ? 'Number' :\n\n                    'string' == tf ? 'String' :\n\n                        '[object Function]' == ts ? 'Function' :\n\n                            '[object Array]' == ts ? 'Array' :\n\n                                '[object Date]' == ts ? 'Date' : 'Object';\n\n  };\n\n  function loadCssString(){\n\n    var style = document.createElement('style');\n\n    style.type = 'text/css';\n\n    var code = Array.prototype.slice.apply(arguments).join('');\n\n    try{\n\n      style.appendChild(document.createTextNode(code));\n\n    }catch(ex){\n\n      style.styleSheet.cssText = code;\n\n    }\n\n    document.getElementsByTagName('head')[0].appendChild(style);\n\n  }\n\n  loadCssString(\n\n      '.json_key{ color: purple;}',\n\n      '.json_null{color: red;}',\n\n      '.json_string{ color: #077;}',\n\n      '.json_link{ color: #717171;}',\n\n      '.json_array_brackets{}');\n\n  var _JSONFormat = function(origin_data){\n\n    this.data = 'string' != typeof origin_data ? origin_data :\n\n        JSON && JSON.parse ? JSON.parse(origin_data) : eval('(' + origin_data + ')');\n\n  };\n\n  _JSONFormat.prototype = {\n\n    constructor : JSONFormat,\n\n    toString : function(){\n\n      return format(this.data, 1);\n\n    }\n\n  }\n\n  return _JSONFormat;\n\n})();\n\nfunction create_result_contatiner(){\n\n  var $result = $('<pre id=\"result\" style=\" width: 100%; height: 100%; overflow: scroll; overflow-x: scroll; overflow-y:scroll\"></pre>')\n\n  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>');\n\n  $result_container.append($result);\n\n  $result_container.hover(function(){\n\n    $(this).stop(true).animate({width:'50%'}, 'slow');\n\n  }, function(){\n\n    $(this).stop(true).animate({width:'5%'}, 'slow');\n\n  });\n\n  $('body').append($result_container);\n\n  return [$result_container, $result];\n\n}\n\n(function request_intercept(args){\n\n  var $result_container = args[0],\n\n      $result = args[1];\n\n  $('form *[type=\"submit\"]').bind('click', function(){\n\n    var _form = $(this).parents('form'),\n\n        _action = (_form.attr('action') || './'),\n\n        _method = (_form.attr('method') || 'get').toLowerCase(),\n\n        _params = {};\n\n    _form.find('input[type=\"text\"]').each(function(){\n\n      var item = $(this);\n\n      _params[item.attr('name')] = item.val();\n\n    });\n\n    $['get' == _method ? 'get' : 'post'](_action, _params, function(response){\n\n      try{\n\n        var j = new JSONFormat(JSON && JSON.parse ? JSON.parse(response) : eval('(' + response + ')'));\n\n        $result.html(j.toString());\n\n      }catch (e){\n\n        $result.html($result.text(response).html());\n\n      }\n\n      $result_container.stop(true).animate({width:'50%'}, 'slow');\n\n    });\n\n    return false;\n\n  });\n\n})(create_result_contatiner());", "url": "https://wpnews.pro/news/json-formater", "canonical_source": "https://gist.github.com/minwe/7497981", "published_at": "2013-11-16 09:19:06+00:00", "updated_at": "2026-05-22 09:51:41.054916+00:00", "lang": "en", "topics": ["developer-tools"], "entities": [], "alternates": {"html": "https://wpnews.pro/news/json-formater", "markdown": "https://wpnews.pro/news/json-formater.md", "text": "https://wpnews.pro/news/json-formater.txt", "jsonld": "https://wpnews.pro/news/json-formater.jsonld"}}