本身作了一个json格式化工具,亲测可使用

随笔背景:在向后台请求数据以后,咱们经常会拿到一串json格式.此时,为了方便查看key-value,程序猿们经常使用一些在线json格式化工具或者是相似于notepadd++这样的工具进行转换.今天笔者捋了捋思路,本身写了一个格式化json数据的小插件.记录于此.

1.在页面上部署一个空白的div,能够向里面输入json数据,方便转化.

html代码以下:

<div class="flexBox">
            <div id="data2" contenteditable="true" style="height: 600px;flex: 8;overflow-y: scroll"></div>
            <button style="flex: 1" id="jsonFormat2">JSON格式化</button>
        </div>

　　注意:设置div的contenteditable属性值为true,可让一个div变的可编辑.(以前我一直觉得只有input家族或者是textarea才能编辑....)

页面的截图以下:

2.接下来是经过js代码遍历json对象,实现格式化.

个人思路是:json对象无疑就是键值对(key-value),咱们能够先遍历json对象的每一个属性(key),判断属性值(value)的类型,若是是一个object,采用一个方法处理,若是是一个非object,则直接展现,咱们姑且把上述方法定义为moreInfo,若是遍历到一个value的类型是Array(数组),那么咱们再递归,继续循环调用moreInfo方法,直到把每个最小单位的键值对取出来.

那么咱们怎么让每个键值对处于一个单行呢?这里我使用的是<p>标签,将key-value包裹在<p>标签便可.递归这一起,提及来挺绕的,须要把思路理清,考虑到每一种状况,再进行对应的操做.

说了个人思路,接下来是js代码部分:

var newEle='';
        $('#jsonFormat2').on('click', function () {
            var resData2=JSON.parse($('#data2').text());
            $('#data2').html('');
            newEle='';
            for(var item in resData2){
                if(typeof(resData2[item])!='object' || resData2[item]==null){
                    newEle+='<p><span class="title">'+item+'</span>:     '+resData2[item]+',</p>';
                }else{
                    moreInfo(resData2[item],item);
                }
            }
            $('#data2').html(newEle);
        })

　　上述代码中:newEle是咱们最终要展现的格式化后的json数据结构,设置按钮的点击事件,一次进行判断处理.

      接下来是比较关键的函数moreInfo了:

function moreInfo(obj,item){
            if(obj instanceof Array){
                newEle+='<p><span class="title">'+item+':['+'</span>'+'</p>';
                for(var i=0;i<obj.length;i++){
                    if(typeof(obj[i])!='object'){
                        newEle+='<p><span class="title">'+obj[i]+',</span></p>';
                    }else{
                        moreInfo(obj[i],'')
                    }
                }
                newEle+='<p><span class="title">'+']'+'</span>'+',</p>';
            }else if(typeof(obj)=='object' && !(obj instanceof Array)){
                newEle+='<p><span class="title">'+item+'{'+'</span>'+'</p>';
                for(var item in obj){
                    if(typeof(obj[item])!='object' || obj[item]==null){
                        newEle+='<p><span class="title">'+item+'</span>:     '+obj[item]+',</p>';
                    }else{
                        moreInfo(obj[item],item)
                    }
                }
                newEle+='<p><span class="title">'+'},'+'</span>'+'</p>';
            }else{
                newEle+='<p><span class="title">'+obj+'</span>'+',</p>';
            }
        }

　　tips:虽然javascript的原生对象中,没有Array这种,也就是经过typeof()没法的到一个Array,即便是typeof(["1","2"]),返回的也是object.可是经过obj instanceof Array能够判断对象是否为数组类型.

3.最终的效果以下图:

 

内容太多就不一一截图了.

总结:最开始我在公司写了大概40分钟左右,可是在进入到moreInfo这个函数以后,始终没法将第二层的json对象中的键值对取出来,回家理清思路以后,解决了.缘由有二:

1.第二层的对象有几个是数组,对于数组这块以前没有作处理,数组的元素多是对象,也可能只是一个string,而对象的内部有可能还有对象以及string.....,如此递归循环

2.在调用moreInfo函数时,我最开始是将newEle做为一个参数传递进去的,经过return的方法,再返回出去.但实际上失败了,回家理清思路以后,就行了:

function moreInfo(obj,item,ele){
        if(obj instanceof Array){
            ele+='<p><span class="title">'+item+':['+'</span>'+'</p>';
            for(var i=0;i<obj.length;i++){
                if(typeof(obj[i])!='object'){
                    ele+='<p><span class="title">'+obj[i]+',</span></p>';
                }else{
                    moreInfo(obj[i],'')
                }
            }
            ele+='<p><span class="title">'+']'+'</span>'+',</p>';
        }else if(typeof(obj)=='object' && !(obj instanceof Array)){
            ele+='<p><span class="title">'+item+'{'+'</span>'+'</p>';
            for(var item in obj){
                if(typeof(obj[item])!='object' || obj[item]==null){
                    ele+='<p><span class="title">'+item+'</span>:     '+obj[item]+',</p>';
                }else{
                    moreInfo(obj[item],item)
                }
            }
            ele+='<p><span class="title">'+'},'+'</span>'+'</p>';
        }else{
            ele+='<p><span class="title">'+obj+'</span>'+',</p>';
        }
    }

　　应该是在moreInfo函数内部再次调用moreInfo时,ele没有传递出去,致使newEle没有发生变化.

      固然这个小插件仍是有瑕疵的,好比说在对于对象结尾的那个逗号进行判断时,还须要优化.

      ps:今天我以为讲解的够详细了额,博客园审核的小编们,大家再将个人博客移出博客园首页的话,就说不过去了吧~ 0 0