本身DIY出來一個JSON結構化展現器

時間 2019-12-10

標籤本身 diy 出來一個 json 構化展現欄目 JavaScript 简体版

原文原文鏈接

說來也巧，這個玩意，一直都想親手寫一個，由於一直用着各類網上提供的工具，以爲這個仍是有些用途，畢竟，後面的實現思路和原理不是太複雜，就是對json的遍歷，而後給予不一樣節點類型以不一樣的展示風格。css

我此次，是出於將一個專利寫清楚，本身構思了一個實現方案，且還能顯示出當前的路徑，具體的顯示風格，依據本身的喜愛，隨便DIY吧。html

寫這個JSON展現器，其實有不少用處，不單單就是爲了看一個json的結構化展現。node

1. 更重要的是能夠輔助用戶和json數據進行交互，可以知道用戶感興趣的json字段是什麼，能夠對這個字段配置相關的數據操做函數 2. 獲取用戶選擇的數據元素的路徑，實現json數據格式的扁平化操做，即將一個深度結構化的數據變形爲一個一位數組的形式

下面直接上代碼，具體邏輯不用細說，全在代碼裏。jquery

1. demo.htmljson

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONviewer</title>
<script src="./jquery.min.js"></script>
<script src="./traverse.js"></script>
<link href="./traverse.css" rel="stylesheet"/>
</head>
<body>
    <div id="container" style="align: left, font-family: 'DejaVu Sans Mono','Courier New',monospace;">
        <h1 style="color: red">Intelligent JSON Viewer</h1>
        <div id="main">            
        </div>
        <script>
            var str = traverseJson(arr)
            console.log($('#main'))
            $('#main').append(str)
        </script>
    </div>
</body>
</html>

2. traverse.js數組

這個js是本結構化展現器的核心內容，這裏只是一個雛形，UI部分能夠根據須要進行美化。app

//測試用的JSON對象
var arr={
    "a":'a1',
    "b":'b1',
    "c":{"c1":'c11',"c2":'c22'},
    "d":['d1','d2'],
    "e":{"e1":['e11','e12'], "e2":['e21','e22','e23']},
    "f":[{"f11":'vf11',"f12":'vf12'},{"f21":'vf21',"f22":'vf22'}],
    "g":[['g11','g12'],['g21','g22']],
    "h":{"h1":{'h11':'h12'}, "h2":{'h21':'h22'}},
    "i":{"i1":{'i11':{'i111':'vi111', 'i112':'vi112'}}, "i2":{'i21':{'i211':'vi211', 'i212':'vi212'}}}
}
/**
 * 遍歷一個JSON對象的全部成員，而後構建成一段html代碼片斷。ul、li組合嵌套，實現，li節點的key爲json的key 
 */
function traverseJson(jsonObj) {
    var htmlStr='<ul key="rootj" class="ul_class">';
    for(var obj in jsonObj){
        htmlStr += '<li class="li_class" key="'+obj+'">'+'<span class="span_class">' +obj+'</span>:'
        if(!(jsonObj[obj] instanceof Object) && !(jsonObj[obj] instanceof Array)){ //基本key-value類型
            htmlStr += jsonObj[obj]
        }else if(jsonObj[obj] instanceof Object && !(jsonObj[obj] instanceof Array)){ //嵌套json類型
            var str1 = traverseJson(jsonObj[obj])
            htmlStr += str1;            
        }else if(jsonObj[obj] instanceof Object && jsonObj[obj] instanceof Array){ //嵌套數組類型
            htmlStr += '<ul class="ul_class" key="'+obj+'">'
            for(var i=0;i<jsonObj[obj].length;i++){
                htmlStr += '<li class="li_class" key="'+i+'">'+ '<span class="span_class">'+i+'</span>:'
                if(!(jsonObj[obj][i] instanceof Object) && !(jsonObj[obj][i] instanceof Array)){
                    htmlStr += jsonObj[obj][i]
                }else {
                    htmlStr += traverseJson(jsonObj[obj][i])
                }                                
                htmlStr += '</li>'
            }
            htmlStr += '</ul>'
        }    
        htmlStr += '</li>'
    }    
    htmlStr += '</ul>'
    return htmlStr;
}
/**
 * 實現數據整形，將一個數組對象的成員元素，變形爲一個json對象的成員選擇邏輯風格。
 * e.g: 數組內容： a,b,1,c,0,0,d
 *      變形結構:  a.b[1].c[0][0].d
 */
function reshape(pathArray){
    var res = ''
    if(pathArray.length <= 0){
        return res
    }
    for(var item in pathArray){
        var el = pathArray[item]
        //console.log(el)
        if(!isNaN(parseInt(el))){
            var ress = res.charAt(res.length-1)            
            if(ress == '.'){
                res = res.substring(0,res.length-1)
            }
            res += '[' + el + '].'
        }else{
            res += el + '.'
        }
    }
    if(res.charAt(res.length-1) === '.'){
        res = res.substring(0,res.length-1)
    }
    return res
}
$(function(){
    /*
     * 點擊選中json的某個屬性名後，獲取當前屬性名與json根節點之間的路徑
     */
    $(".span_class").click(function (e) {        
        var route=[]
        var parents = $(this).parents('.li_class')        
        for(var i=0;i<parents.length;i++){    
            var node = parents[i] 
            if(node.className=='li_class'){                
                route.unshift(node.getAttribute('key'))
            }
        }
        var path = reshape(route)        
        route=route.join('->')
        var out = route + " : " + path
        console.log(out)
        alert(out)
    })
})

3. traverse.css函數

.ul_class {
    padding-left: 30px;    
}

.li_class {
    font-family: 'DejaVu Sans Mono','Courier New',monospace;
    font-size: 15px;
    line-height: 12px;
    word-wrap: break-word;
}
.span_class:hover {
    color: red;
    font-size: 20px;
    line-height: 18px;
    cursor: pointer;
    font-weight:bold;
}