打造一個完美的JSON閱讀器

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，由於其簡潔、可讀性高和易於解析等特點，現已成為前端開發中最常用的數據傳輸格式。然而，一個好的 JSON 數據閱讀器可以讓數據的結構和內容更加清晰易讀，提高開發效率。接下來，我們將以打造一個完美的 JSON 閱讀器為例，來闡述如何從多個方面進行設計和優化。

一、解析JSON數據

如何解析JSON數據一般有兩種方式：直接使用eval()函數和使用JSON對象的parse()方法。eval()函數可以將任何JavaScript代碼字符串解析為可執行的代碼，在解析非簡單JSON數據時會帶來潛在的安全風險。因此，我們建議使用JSON對象的parse()方法進行JSON數據的解析。

const jsonStr = '[{"name": "John", "age": 35}, {"name": "Alex", "age": 25}]';
const jsonArray = JSON.parse(jsonStr); // 解析JSON字符串為數組
console.log(jsonArray); // [{name: "John", age: 35}, {name: "Alex", age: 25}]

在此基礎上，我們可以對解析後的 JSON 數據進行遍歷和操作，方便地將其展示到頁面上。

二、格式化JSON數據

當 JSON 數據非常大且嵌套層次很深時，其格式化後的展示可以更加清晰易讀。在展示 JSON 數據時，我們可以為其添加縮進和換行符等視覺分隔符，以達到更好的閱讀效果。

const jsonStr = `{
  "name": "John",
  "age": 35,
  "isMarried": true,
  "hobbies": [
    "reading",
    "swimming",
    "cooking"
  ],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": 10001
  }
}`;

const jsonFormatted = JSON.stringify(JSON.parse(jsonStr), null, 2); // 第二個參數為格式化選項
console.log(jsonFormatted);

/* 輸出結果
{
  "name": "John",
  "age": 35,
  "isMarried": true,
  "hobbies": [
    "reading",
    "swimming",
    "cooking"
  ],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": 10001
  }
}
*/

三、展開/摺疊JSON數據

在 JSON 數據非常大或者嵌套層次很深時，我們可以提供展開/摺疊功能，以方便用戶查看和操作數據。

// 使用遞歸方式遍歷JSON數據，增加展開/摺疊功能

function render(jsonObj, level) {

let html = '';

for(let key in jsonObj) {

const value = jsonObj[key]; // value可能為對象或數組

const valueType = Object.prototype.toString.call(value);
 html += `
 ${key}:`;
 if(valueType === '[object Object]') {
 html += '{' + render(value, level+1) + '}';
 } else if(valueType === '[object Array]') {
 html += '[';
 for(let i=0; i<value.length; i++) {
 const item = value[i];
 const itemType = Object.prototype.toString.call(item);
 if(itemType === '[object Object]') {
 html += '{';
 html += render(item, level+1);
 html += '} ';
 } else {
 html += `${item} `;
 }
 }
 html += ']';
 } else {
 html += `${value}`;
 }
 html += '
原創文章，作者：PWZTP，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/367957.html