前言

本文介紹的是如何實(shí)現(xiàn)json數(shù)據(jù)可視化，要用到的核心是JSON.stringify這個(gè)函數(shù)，沒想到吧，平時(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，則將生成返回值文本，而沒有任何額外空格。

     如果 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ù)有高亮效果，我們還可以寫一個(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));

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流。

最新評(píng)論