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

简单易行业作风度翩翩招实现json数据可视化

2015/07/21 · JavaScript
· JSON,
数据可视化

原来的小说出处: 吕大豹   

付出三个内部职能时遇见的急需,要把json数据在页面上显得出来,日常浏览器会安装jsonView那样的扩大来看json数据,不过程序要用到的话该怎么做吧?几天前在英特网找出的时候,发现了那么些小技能,分享一下。

要用到的中坚是JSON.stringify那几个函数,没悟出吧,平日我们只把它用来种类号json数据。然则那些stringify是有三个参数的,

JavaScript

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

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

,具体陈说请看这里:

咱俩要用到的正是那第多少个参数,它能够钦赐在更换的字符串中扩展少空格,从而生成有早晚格式的字符串。生成的字符串大家能够献身<pre>标签中,这样就能够很好的显得缩进。然后呢,为了让变化的多寡有高亮效果,我们还是能够写四个简易的高亮函数。基本正是如此个原理啦,请看代码达成:

JavaScript

function output(inp) {
document.body.appendChild(document.createElement(‘pre’)).innerHTML =
inp; } function syntaxHighlight(json) { json = json.replace(/&/g,
‘&’).replace(/</g, ‘<‘).replace(/>/g, ‘>’); 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));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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));

最终生成的效果与利益正是那样的:

图片 1

是否轻巧而又实用吧~

1 赞 1 收藏
评论

图片 2

相关文章