簡單一招實現json資料視覺化

阿新 • • 發佈：2018-12-23

開發一個內部功能時碰到的需求，要把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, '&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));

123456789101112131415161718192021222324252627282930313233343536

functionoutput(inp){document.body.appendChild(document.createElement('pre')).innerHTML=inp;}functionsyntaxHighlight(json){json=json.replace(/&/g,'&').replace(/</g,'<').replace(/>/g

,'>');returnjson.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,function(match){varcls='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']}};varstr=JSON.stringify(obj,undefined,4);output(syntaxHighlight(str));

最終生成的效果就是這樣的：

是不是簡單而又實用呢~

簡單一招實現json資料視覺化

簡單一招實現json資料視覺化

4種更快更簡單實現Python資料視覺化的方法

4種更快更簡單實現Python資料視覺化的方法！

超級乾貨：一文讀懂資料視覺化

[Echarts視覺化] 二.php和ajax連線資料庫實現動態資料視覺化

5款Python繪相簿，為你輕鬆實現大資料視覺化！

phthon資料視覺化之matplotlib在window終端的視覺化xmanger passive方式簡單實現（網上沒找到辦法，自己折騰出來的網際網路第一貼）

Unity3D資料視覺化控制元件的簡單實現-Mysql資料庫

資料視覺化：淺談熱力圖如何在前端實現

在8位微控制器上實現JSON資料的簡單解析（微控制器解析JSON）

資料視覺化方法（一）

資料視覺化：CSV格式，JSON格式

Cesium中級1 - 空間資料視覺化（一）

資料清洗-> 資料入庫-> 資料視覺化的簡單專案

neo4j圖形資料庫第七彈——整合vis.js實現資料視覺化

資料視覺化-------------------------------------下載資料學習（一）

簡單的資料視覺化

資料視覺化-Matplotlib繪製簡單拆線圖

python資料視覺化seaborn（一）—— 整體樣式與調色盤

Python資料視覺化matplotlib（一）—— 圖表的基本元素

簡單一招實現json資料視覺化

相關推薦