最近开发中需要在页面展示json。特整理了下代码，送给大家，希望能帮到有同样需求的朋友们。

代码：


<html>

<script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script>

<body>

	<span class="result"></span>

<script>

//json格式化方法   参数1：json对象，参数2：缩进字符数

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){

        object = object.replace(/\</g,"<");

        object = object.replace(/\>/g,">");

        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 '<span data-type="array" data-size="' + tmp_array.length + '"><i  style="cursor:pointer;" class="fa fa-minus-square-o" onclick="hide(this)"></i>[<br/>'

            + tmp_array.join(',<br/>')

            + '<br/>' + indent_tab(indent_count - 1) + ']</span>';

    }

    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 '<span  data-type="object"><i  style="cursor:pointer;" class="fa fa-minus-square-o" onclick="hide(this)"></i>{<br/>'

            + tmp_array.join(',<br/>')

            + '<br/>' + indent_tab(indent_count - 1) + '}</span>';

    }

    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: #92278f;font-weight:bold;}',

        '.json_null{color: #f1592a;font-weight:bold;}',

        '.json_string{ color: #3ab54a;font-weight:bold;}',

        '.json_number{ color: #25aae2;font-weight:bold;}',

        '.json_link{ color: #717171;font-weight:bold;}',

        '.json_array_brackets{}');

    var _JSONFormat = function(origin_data){

        this.data = JSON.parse(origin_data);

    };

    _JSONFormat.prototype = {

        constructor : JSONFormat,

        toString : function(){

            return format(this.data, 1);

        }

    }

    return _JSONFormat;

  })();

  	//json案例

  	var demoJson = {

	  "A1": "a1",

	  "A11": "a11",

	  "A111_next": [

	    {

	      "B1": "b1",

	      "B11": "b11",

	      "B111_next": [

	        {

	          "C1": "c1",

	          "C11": "c11",

	          "C111_next": []

	        }

	      ]

	    },

	    {

	      "B2": "b2",

	      "B22": "b22",

	      "B222_next": []

	    }

	  ]

	} 

    //将格式化好的json显示到前台页面

    function showJson(demoJson) {

       	var result = new JSONFormat(JSON.stringify(demoJson),4).toString()

        $('.result').html(result);

    }

	showJson(demoJson);

</script>

</body>

</html> 　

效果图

json格式化显示样式js代码分享的更多相关文章

  1. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  2. Submine Text3格式化HTML/CSS/JS代码

    Submine Text3格式化HTML/CSS/JS代码需要安装插件,步骤如下: 1.打开菜单--->首选项---->Package Control,输入 install package ...

  3. 如何格式化被压缩的JS代码以方便阅读

    本文分两部分: 1.转载部分 2.个人补充部分 1.主题内容转载83,http://www.madeby83.com/unzip-the-js-code.html 我们经常可以看到一些网站,把所需的j ...

  4. Sublime text 3 如何格式化HTML/css/js代码

    Sublime Text 3 安装Package Control   原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用Ctrl+`快捷键或者通过Vi ...

  5. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

  6. js的 new Date()日期格式化显示以及js获取时间戳

    一.日期格式化显示: 对 new Date() 得到日期的进行格式显示扩展,扩展方法如下: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分 ...

  7. sublime text3格式化html,css,js代码

    需要安装HTML/CSS/JS prettify插件. 安装步骤:首选项 -> Package Control -> Install Package -> HTML-CSS-JS P ...

  8. shell脚本实现拷贝大文件显示百分比的代码分享

    #!/bin/sh strace -q -eread cp -- "${1}" "${2}" 2>&1 \| awk '{    count += ...

  9. Sublime Text 3 格式化HTML CSS JS 代码

    一,首先通过ctrl+shift+p 要等一会就会出现插件安装界面 二,在插件安装输入框,输入:HTML-CSS-JS Prettify  并安装该插件 三,如果没有装nodejs, 下载nodejs ...

随机推荐

  1. PAT1089. Insert or Merge

    PAT1089. Insert or Merge 题目大意 给定一个初始序列src, 一个排序当中的序列tar, 问排序方式是 Insert Sort, 或者 Merge Sort. 并输出下一次迭代 ...

  2. mysql复制表数据，多表数据复制到一张表

    对于mysql 复制表数据可以使用 insert into select 方式 示例: $sql="insert into icarzoo.provider(providerId,provi ...

  3. Vue 封装的组件生命周期钩子

    export default { // ... // 在组件初始化时调用,可以简单理解为页面加载时 created () { // 存在 localStorage 的缓存内容 if (localSto ...

  4. ACL常用命令及工作原理

    What ACL 是一系列 IOS 命令,根据数据包报头中找到的信息来控制路由器应该转发还是应该丢弃数据包.ACL 是思科 IOS 软件中最常用的功能之一. 在配置后,ACL 将执行以下任务: 限制网 ...

  5. LeetCode 中级 - 第k个排列(60)

    可以用数学的方法来解, 因为数字都是从1开始的连续自然数, 排列出现的次序可以推 算出来, 对于n=4, k=15 找到k=15排列的过程: 1 + 对2,3,4的全排列 (3!个) 2 + 对1,3 ...

  6. 【TOJ 1545】Hurdles of 110m（动态规划）

    描述 In the year 2008, the 29th Olympic Games will be held in Beijing. This will signify the prosperit ...

  7. SQL：检索数据-基本检索

    检索数据 1.select语句 增删改查四大操作之"查",即检索: 一般包括:what,where:查什么,从哪里选择 2.检索单个列 例:想从products表中检索名为prod ...

  8. Flask中异常捕获

    HTTP 异常主动抛出 abort 方法 抛出一个给定状态代码的 HTTPException 或者 指定响应,例如想要用一个页面未找到异常来终止请求,你可以调用 abort(404). 参数: cod ...

  9. Percona-Tookit工具包之pt-kill

      Preface       Sometimes,we are determined to kill some MySQL connections which are occupying huge ...

  10. 在ReactNative中使用Typescript

    在ReactNative中使用Typescript 少侠放心,跟着我的这个步骤走,保你完美在RN项目中使用Typescript,废话不多说,走你 1.全局安装create-react-native-a ...