最近开发中需要在页面展示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. 移动端flex自适应方案。（px to rem）

    define(function (require, exports, module) { exports.mobileUtilMethod = function () { (function (e, ...

  2. SpringBoot非官方教程 | 第四篇：SpringBoot 整合JPA

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot4-jpaJ/ 本文出自方志朋的博客 JPA全称J ...

  3. MySQL表结构（含数据类型、字段备注注释）导出成Excel

    方法一: 1.用的是Navicat Premium,可以换成任意图形化客户端 SELECT COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA_TYPE 字段类型, CHAR ...

  4. Windows 2008 server + IIS 7 设置身份模拟(ASP.NET impersonation)

    IIS7 与 IIS 6 相比有了很大的改动,原来在 IIS 6 下可以的设置到了 IIS 7 下有的会发生变化.身份模拟的配置上,IIS7 和 IIS6有很大不同,网上IIS6的身份模拟的文章比较多 ...

  5. SQL0668N 不允许对表XX执行操作，原因码为 "3"

    DB2 Load导入数据失败之后,表被锁,提示,SQL0668N 不允许对表XX执行操作,原因码为 "3". 之前也遇到过,当时都是现查现用的,现在在博客记一下,以备后查. 解决方 ...

  6. WKWebView简单使用及关于缓存的问题

    Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7.支持到IOS8 ...

  7. Angularjs基础(十一)

    ng-csp 描述:修改内容的安全策略 实例: 修改AngularJS 中关于"eval"的行为方式及内联样式: <body ng-app="" ng-c ...

  8. 剑指offer js算法练习(1-10)

    1.二维数组中的查找       在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...

  9. fjutacm 2492 宠物收养所 ： Splay 模板 O(nlogn)

    /** problem: http://www.fjutacm.com/Problem.jsp?pid=2492 Splay blog: https://tiger0132.blog.luogu.or ...

  10. WIN10 vagrant和virtualbox虚拟机和一键搭建lnmp环境配置thinkphp虚拟主机

    版本:win10系统 virtualbox:5.1.26 vagrant :1.9.7 centos 7.0 xshell/git 首先下载好对应版本的软件 配置vagrant和virtualbox ...