最近开发中需要在页面展示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. CSU-ACM2018暑假集训比赛1

    A:https://www.cnblogs.com/yinbiao/p/9365127.html B:https://www.cnblogs.com/yinbiao/p/9365171.html C: ...

  2. MvcApplication 中方法的那点事

    最近比较闲,不知道干点啥,想找兼职没有合适的,不找工资又不够花,o(︶︿︶)o 唉! 说多了都是泪,入正题吧. 首先,新建一个MVC4.0项目,建好之后打开Global.asax文件,在MVCAppl ...

  3. A Year in Computer Vision

    A Year in Computer Vision http://themtank.org/

  4. 记录使用antd时样式不生效的问题

    最近在学webpack,就配置了一个react的运行环境,为了偷懒使用了antd npm install antd 之后发现竟然tmd没有样式 谷歌之后发现好多同学都出现了这个问题,好在最后解决了 在 ...

  5. 微信小程序已发布版本vconsole仍出现问题解决办法

    解决办法很简单,进入小程序的体验或者开发版,点击关闭调试,再次进入小程序,就不会出现了

  6. spring入门(八) spring mvc设置默认首页

    1.web.xml配置如下 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  7. JS模块化知识总结

    背景 <script src="a.js"></script> <script src="b.js"></script ...

  8. web常用软件

    编辑器: VSCode HBuilder WebStorm NotePad++ Eclipse Atom 常用插件: SwitchyOmega Vue-Tools server类: tomcat Ng ...

  9. Zabbix——部署(DB与web一体)

    前提条件: CentOS连接网络并可以正常访问网络 DNS设置完成,可以Ping同外网域名 安装数据库为8.0版本 关闭防火墙 如果需要搭建分离式请见:DB与Web分离 &DB.web.age ...

  10. ubuntu安装和常用软件推荐

    ubuntu安装和常用软件推荐(个人整理) 2016.08.22 17:29 13811浏览 字号 安装一套双系统,win10打游戏,ubuntu开发,win10放机械,ubuntu放固态,电脑联想i ...