快捷導(dǎo)航

如何實(shí)現(xiàn)json數(shù)據(jù)可視化詳解

更新時(shí)間：2016年11月24日 10:59:32 作者：呂大豹

最近在工作中開(kāi)發(fā)一個(gè)內(nèi)部功能時(shí)碰到的一個(gè)需求，要把json數(shù)據(jù)在頁(yè)面上展示出來(lái)，平時(shí)瀏覽器會(huì)安裝jsonView這樣的擴(kuò)展來(lái)看json數(shù)據(jù)，但是程序要用到的話該怎么辦呢？今天在網(wǎng)上搜索的時(shí)候，發(fā)現(xiàn)了這個(gè)小技巧，分享給大家，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧

前言

本文介紹的是如何實(shí)現(xiàn)json數(shù)據(jù)可視化，要用到的核心是JSON.stringify這個(gè)函數(shù)，沒(méi)想到吧，平時(shí)我們只把它用來(lái)序列號(hào)json數(shù)據(jù)。

JSON.stringify 函數(shù)

將 JavaScript 值轉(zhuǎn)換為 JavaScript 對(duì)象表示法 (Json) 字符串。

語(yǔ)法

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

參數(shù)

value

必需。要轉(zhuǎn)換的 JavaScript 值（通常為對(duì)象或數(shù)組）。

replacer

可選。用于轉(zhuǎn)換結(jié)果的函數(shù)或數(shù)組。

如果 replacer 為函數(shù)，則 JSON.stringify 將調(diào)用該函數(shù)，并傳入每個(gè)成員的鍵和值。使用返回值而不是原始值。如果此函數(shù)返回 undefined，則排除成員。根對(duì)象的鍵是一個(gè)空字符串：""。

如果 replacer 是一個(gè)數(shù)組，則僅轉(zhuǎn)換該數(shù)組中具有鍵值的成員。成員的轉(zhuǎn)換順序與鍵在數(shù)組中的順序一樣。當(dāng) value 參數(shù)也為數(shù)組時(shí)，將忽略 replacer 數(shù)組。

space

可選。向返回值 JSON 文本添加縮進(jìn)、空格和換行符以使其更易于讀取。

如果省略 space，則將生成返回值文本，而沒(méi)有任何額外空格。

如果 space 是一個(gè)數(shù)字，則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格。如果 space 大于 10，則文本縮進(jìn) 10 個(gè)空格。

如果 space 是一個(gè)非空字符串（例如“\t”），則返回值文本在每個(gè)級(jí)別中縮進(jìn)字符串中的字符。

如果 space 是長(zhǎng)度大于 10 個(gè)字符的字符串，則使用前 10 個(gè)字符。

返回值

一個(gè)包含 JSON 文本的字符串。

json數(shù)據(jù)可視化

我們要用到的就是這第三個(gè)參數(shù)，它可以指定在生成的字符串中加多少空格，從而生成有一定格式的字符串。生成的字符串我們可以放在<pre>標(biāo)簽中，這樣就能很好的顯示縮進(jìn)。然后呢，為了讓生成的數(shù)據(jù)有高亮效果，我們還可以寫(xiě)一個(gè)簡(jiǎn)單的高亮函數(shù)。

基本就是這么個(gè)原理啦，請(qǐng)看代碼實(shí)現(xiàn)：

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));

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