自己做了一个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