本身作了一個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