我们知道,在js中JSON.parse(xxx)可以将符合json规则的字符串xxx转换成js对象,反过来,可以通过JSON.stringify(xxx)将json对象转换成js字符串。
可能有这样的需求,将json对象在web界面上以友好的方式展现出来,说得直白一点,就是带缩进的格式展示,而这个需求是JSON.parse()无法实现的,我们需要自己实现这个
功能。
思路很简单:遍历json对象的各个属性,进行缩进、换行拼接字符串,如果属性也是json对象,那么就多缩进一层,显然,这是一个递归。
下面直接给出代码(缩进采用\t,拼接字符串时处理了双引号这一种特殊字符,其他的特殊字符也可以参考双引号进行处理)
function formatJson(json, indent, returnStr) {
var padding='\t';
var type = typeof json;
if(type=='object'){
if(json instanceof Array){
if(indent >0){
var pad = "";
for(var i=0;i<indent;i++){
pad += padding;
}
returnStr +=pad;
}
returnStr +='[\r\n';
var pad = "";
for(var i=0;i<indent+1;i++){
pad += padding;
}
for(var j=0;j<json.length;j++){
var data = json[j];
returnStr= formatJson(data, indent+1, returnStr);
if(j<json.length-1){
returnStr +=',\r\n';
}else{
returnStr +='\r\n';
}
}
if(indent >0){
var pad = "";
for(var i=0;i<indent;i++){
pad += padding;
}
returnStr +=pad;
}
returnStr +=']\r\n';
}else{
if(indent >0){
var pad = "";
for(var i=0;i<indent;i++){
pad += padding;
}
returnStr +=pad;
}
returnStr +='{\r\n';
var pad = "";
for(var i=0;i<indent+1;i++){
pad += padding;
}
var proNum = Object.getOwnPropertyNames(json).length;
var i=0;
for(var key in json){
i++;
var value = json[key];
returnStr +=pad;
returnStr = returnStr+'"' +key +'":';
returnStr = formatJson(value, indent+1, returnStr);
if(i<proNum){
returnStr +=',\r\n';
}else{
returnStr +='\r\n';
}
}
if(indent >0){
var pad = "";
for(var i=0;i<indent;i++){
pad += padding;
}
returnStr +=pad;
}
returnStr +='}\r\n';
}
}else{
returnStr = returnStr + '"'+json.replace(/\"/g,'\\"')+'"';
}
return returnStr.replace(/\r\n\r\n/g,'\r\n').replace(/\r\n,\r\n/g,',\r\n');
}
方法的三个参数:json是需要处理的json对象,indent是缩进的层级,returnStr是最后返回的字符串
调用时
var str =new String("");
str=formatJson(data,0,str);
反过来,将格式化的json字符串转换成json对象,需要将多余的换行符和缩进去掉。
var newStr = $(".apiJSONStr").val();
var reg =/\n/g;
newStr = newStr .replace(reg,'');//replace \r\n
reg=/(\t)/g;
newStr = newStr .replace(reg,'');
try{
JSON.parse(newStr );
}catch (e) {
alert("JSON数据格式异常,请排查!");
}
本文地址 http://blog.youkuaiyun.com/musa875643dn/article/details/71173304