JS 递归渲染，json 数据（不包含json 数组）解析成 yaml 文件的格式类型

不是纯文本的yaml ，而是利用的dl dt 来渲染的，做成的是图表的形式，同级的json 前面会有相同的间距，去掉图表的渲染应就是yaml 文本格式了

---

先是json的图：

效果图 :

 

 

js 代码

var jsonHealth =

{"description":"Composite Discovery Client","status":"UP","discoveryComposite":{"description":"Composite Discovery Client","status":"UP","discoveryClient":{"description":"Composite Discovery Client","status":"UP","services":["sba-eureka-example"]},"eureka":{"description":"Remote status from Eureka server","status":"UP","applications":{"SBA-EUREKA-EXAMPLE":2,"ZIPKIN":0,"UNKNOWN":0,"SBA-LIULD":0}}},"diskSpace":{"status":"UP","total":53660876800,"free":22863028224,"threshold":10485760},"hystrix":{"status":"UP"}};

 

//判断obj是否为json对象
function isJson(obj){    
    var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length; 
    return isjson;
}
//传入json 遍历json
function healthOpt(jsonHealth){
    var dlStr ="";
    for(var key in jsonHealth){
        var str ='

'+key+' UP

';    
        //如果值是json 渲染,不是json 而是键值对 ，则画table 添加
        if(isJson(jsonHealth[key])){
            var jsonKV = {};
            var jsonSon = {};
            
            //遍历 json, 垃圾分类 
            for(var keySon in jsonHealth[key] ){
                //判断是否有子集，没有子集的kv对 生成table 有子集的json生成一个 新的子级 dl
                //子集是json 存起来，不是json 也存起来
                if(isJson(jsonHealth[key][keySon])){
                    jsonSon[keySon]=jsonHealth[key][keySon];
                }else{
                    jsonKV[keySon]=jsonHealth[key][keySon];
                }
            }
            // 没有子集的 渲染成一个table 放在dd里面
            str +='

';
            for(var keyNoSon in jsonKV){
                str += '';
            }
            str +='

'+keyNoSon+'	'+jsonKV[keyNoSon]+'

';
            // 有子集的 是json 递归调用 生成dl 也放在 dd 里面
            if(!jQuery.isEmptyObject(jsonSon)){
                
                for(var keyHasSon in jsonSon){
                    str +='

';
                    var tmpJson = {};
                    tmpJson[keyHasSon]=jsonSon[keyHasSon];
                    str += healthOpt(tmpJson);
                    str +='

';
                }
            }
        }else{
            str +='

';
            str += '';
            str +='

'+key+'	'+jsonHealth[key]+'

';
    
        }
        str += '

' ;
        dlStr +=str;
    }
    return dlStr;
    
}

$(".panel-body").append(healthOpt(jsonHealth));

html

 

   

Health