微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

简单一招实现json数据可视化

2015-07-31 20:01 前端大全

(点击上方,可快速关注)


作者:吕大豹

网址:http://www.cnblogs.com/lvdabao/p/4662612.html

点击“阅读原文”可查看本文网页版


开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一下。


要用到的核心是JSON.stringify这个函数,没想到吧,平时我们只把它用来序列号json数据。但是这个stringify是有三个参数的,


JSON.stringify(value [, replacer] [, space])


,具体描述请看这里:https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx


我们要用到的就是这第三个参数,它可以指定在生成的字符串中加多少空格,从而生成有一定格式的字符串。生成的字符串我们可以放在<pre>标签中,这样就能很好的显示缩进。然后呢,为了让生成的数据有高亮效果,我们还可以写一个简单的高亮函数。基本就是这么个原理啦,请看代码实现:


function output(inp) {

document.body.appendChild(document.createElement('pre')).innerHTML = inp;

}


function syntaxHighlight(json) {

json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

var cls = 'number';

if (/^"/.test(match)) {

if (/:$/.test(match)) {

cls = 'key';

} else {

cls = 'string';

}

} else if (/true|false/.test(match)) {

cls = 'boolean';

} else if (/null/.test(match)) {

cls = 'null';

}

return '<span class="' + cls + '">' + match + '</span>';

});

}


var obj = {

num: 1234,

str: '字符串',

arr: [1,2,3,4,5,6],

obj: {

name: 'tom',

age: 10,

like: ['a', 'b']

}

};

var str = JSON.stringify(obj, undefined, 4);


output(syntaxHighlight(str));


最终生成的效果就是这样的:



是不是简单而又实用呢~



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 统计分组和统计次数分布的关系 App架构设计经验谈:接口的设计 R Tricks: 如何巧为观测标记序号 Android优化 网易这样用sys schema优雅提升MySQL易用性