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/n/367957.html
微信扫一扫 
支付宝扫一扫 