json对象格式化展示

最新推荐文章于 2024-04-15 20:39:50 发布

阳光下的小鱼

最新推荐文章于 2024-04-15 20:39:50 发布

阅读量426

点赞数

分类专栏： Ext应用登录页面素材文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/xubaoyong/article/details/84822516

版权

Ext应用同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

登录页面素材

7 篇文章 0 订阅

订阅专栏

<!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>

阳光下的小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json对象格式化展示

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="A
复制链接

扫一扫