json对象格式化展示 博客分类： Ext应用登录页面素材
程序员文章站
2024-03-13 22:47:52
...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
</head>
<body>
<pre id="pre">
</pre>
<pre id="pre2">
</pre>
</body>
<script type="text/javascript">
<!--
/**
json在线格式化方法1
**/
function getFormatJsonStrFromString(jsonStr){
var res="";
for(var i=0,j=0,k=0,ii,ele;i<jsonStr.length;i++)
{//k:缩进，j:""个数
ele=jsonStr.charAt(i);
if(j%2==0&&ele=="}")
{
k--;
for(ii=0;ii<k;ii++) ele=" "+ele;
ele="\n"+ele;
}
else if(j%2==0&&ele=="{")
{
ele+="\n";
k++;
for(ii=0;ii<k;ii++) ele+=" ";
}
else if(j%2==0&&ele==",")
{
ele+="\n";
for(ii=0;ii<k;ii++) ele+=" ";
}
else if(ele=="\"") j++;
res+=ele;
}
return res;
}
/**
json在线格式化方法2
**/
function jsonformat(txt,compress/*是否为压缩模式*/){/* 格式化JSON源码(对象转换为JSON文本) */
var indentChar = ' ';
if(/^\s*$/.test(txt)){
alert('数据为空,无法格式化! ');
return;
}
try{
var data= null;
if(typeof txt == 'object'){
data = txt;
}else{
data=eval('('+txt+')');}
}
catch(e){
alert('数据源语法错误,格式化失败! 错误信息: '+e.description,'err');
return;
};
var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0;
var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */
tab=compress?'':tab;/*压缩模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/
}else if(value&&typeof value=='object'){/*处理对象*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/
var len=0,i=0;
for(var key in value)len++;
for(var key in value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/
}else{
if(typeof value=='string')value='"'+value+'"';
draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line);
};
};
var isLast=true,indent=0;
notify('',data,isLast,indent,false);
return draw.join('');
}
var abcJSON = {name:"name",age:12}
abc = JSON.stringify(abcJSON);
document.getElementById("pre").innerHTML= getFormatJsonStrFromString(abc);
document.getElementById("pre2").innerHTML= jsonformat(abcJSON,false);
//-->
</script>
</html>