JSON 格式化成视图模式

来源：互联网发布：手机淘宝如何改店名编辑：程序博客网时间：2024/04/29 21:15

说到这个json格式化工具，相信大家都用过，比如我个人就喜欢用的一款本地化json格式化工具 HiJson，也有一些在线格式化工具 bejson, 这些工具都是将json转化为视图方便进行查看。今日我闲来无事，自己写了个简陋的json格式化视图工具，其实是为了方便公司的测试妹子来查看数据，因为她没此拉数据然后将数据解密出来，然后再格式化，我感觉挺浪费时间的，所有就给他做了一个工具，附带加解密功能，并将解密的结果转成json视图查看，下面是整体的效果图：

如上，左边是加解密工具，右边则是将解密的json字符串转成的视图（有点简陋^_^）！

今天这篇文章的重点是如何去实现右边json视图的功能，下面我把代码贴出来
文件名：kjson.js

/** * Created by 004928 on 2016/12/22. * json格式化工具 */function KJSON () {    // 默认偏移量    var defaule_offsetX = 25;    /**     * 判断是否是JsonObject对象     * @param obj     * @returns {*|boolean}     */    function isJsonObject (obj) {        return obj && typeof obj === "object" ;    }    /**     * 判断是否是空的JSON对象     * @param obj     */    function isEmptyJsonObject (obj) {        return JSON.stringify(obj) == "{}" ;    }    /**     * 判断是否是空的JSON数组     */    function isEmptyJsonArray (obj) {        return JSON.stringify(obj) == "[]" ;    }    /**     * 判断是否是JsonArray对象     * @param obj     * @returns {boolean}     */    function isJsonArray (obj) {        return obj.length === "number" ;    }    /**     * 取出JSON对象值为string 和 null 类型的值     * @param text     * @returns {*}     */    function getValue (key , obj) {        if(obj[key] && typeof obj[key] === "object") {            key = "╋"+key;        } else if(!obj[key]) {            key = key+":"+"null";        } else {            key = key+":"+obj[key];        }        return key;    }    /**     * 创建元素     * @param parent     * @param obj     */    function createElement (parent , obj , propertyName , left) {        var el = document.createElement("div");        var textNode = document.createTextNode(getValue(propertyName , obj));        el.appendChild(textNode);        el.style.paddingLeft = left+"px";        parent.appendChild(el);        addClickListener(el , obj[propertyName] , propertyName);    }    /**     * 添加点击事件     * @param el     * @param value     */    function addClickListener (el , value , key) {        if(isJsonObject(value)) {            el.addEventListener("click" , function (event) {                if(event.target == this) {                    // 判断当前项是否是展开状态                    if(el.children.length > 0) {                        el.innerHTML = ""; el.innerText = "╋"+key;                    } else {                        el.innerText = el.innerText.charAt(0) == "╋" ? "━"+key: "╋"+key;                        if(typeof value.length === "number") {                            if(isEmptyJsonArray(value)) {                                el.innerText = el.innerText.concat(":[]");                                return ;                            }                            var arrayTemp = {};                            for(var i = 0 ; i < value.length ; i ++) {                                arrayTemp["["+i+"]"] = value[i];                                createElement(el , arrayTemp , "["+i+"]" , defaule_offsetX);                            }                        } else {                            if(isEmptyJsonObject(value)) {                                el.innerText = el.innerText.concat(":{}");                                return ;                            }                            for( propertyName in value) {                                createElement(el , value , propertyName , defaule_offsetX);                            }                        }                    }                }            });        }    }    /**     * 转化为json     * @param parent     * @param jsonStr     */    function toJson (parent , jsonStr) {        if(jsonStr) {            try{                var jsonObj  = JSON.parse(jsonStr);                for( propertyName in jsonObj) {                    createElement(parent , jsonObj , propertyName , 0);                }            }catch(e){                console.log("内容非json格式");            }        }    }    return {        /**         * 暴漏给外部调用的方法         * @param parent         * @param jsonStr         */        toJson:function (parent , jsonStr) {            toJson(parent , jsonStr);        }    };}

以上是所有js代码，通过调用toJson方法，传递两个参数
parent: 父容器div对象那个
jsonStr: json格式的字符串
首先说一下我实现的思路，我不是将所有json都解析后然后一个一个层级去创建，点击之后再展开显示，我是每次只遍历最外层，然后创建div添加进父div中，然后点击某个div再去创建其子元素，显示出来。如下结构：

{    "data":"123",    "result":{        "name":"xxx"    },}

如上，我会先创建data 和result的div，添加到其父div中，当点击result div时，我再去创建name div添加进去，因此我是每次点击父div的时候再去加载其子元素。所有主要方法看 addClickListener 方法，首先判断当前div是否有子元素，如果有，说明当前是展开状态，清除其所有子元素（因为我是点击之后再去加载其子元素的，所以如果 el.children.length > 0 说明当前是展开的），如果没有则判断当前div的值是jsonArray还是jsonObject，然后再分别对其遍历，创建元素。主要的逻辑代码都在addClickListener 方法中，大家可以仔细看，其中我做了一些优化判断，值是string，boolean，number的就没有设置监听，同事空的jsonArray和jsonObject的我会显示 “[]”和“{}”来表示当前对象/数组没有值。

最后贴一下在网页中如何去引用的代码：

<div id="parent">    // json视图父容器</div><script src="../js/kjson.js"></script><script>    function changeToJsonView (){        var el = document.getElementById("parent");        var kjson = new KJSON();        kjson.toJson(el , "json格式的字符串");    }</script>

结束，写的不好大家见谅啊，欢迎批评指正，谢谢了！

0 0