前言

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

JSON.stringify 函數(shù)

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

語法

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

參數(shù)

value

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

replacer

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

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

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

space

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

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

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

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

     如果 space 是長度大于 10 個字符的字符串，則使用前 10 個字符。

返回值

一個包含 JSON 文本的字符串。

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

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

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

最新評論