从后台传来一组多层结构的复杂map键值对数据,如下:
{ "custId": "fc2ac08f-3261-407c-b544-c3797b30509b", "extId": null, "operatorId": "", "retCode": null, "retMsg": null, "respSysCode": null, "respSysCodeMsg": null, "respBizCode": null, "respBizCodeMsg": null, "creditData": { "watchList_zmWatchListDetail": [ { "bizCode": "AC", "code": "AC005001", "extendInfo": null, "level": 0, "refreshTime": 1498060800000, "settlement": true, "statement": null, "status": null, "type": "AC005" }, { "bizCode": "AA", "code": "AA001012", "extendInfo": null, "level": 0, "refreshTime": 1498060800000, "settlement": true, "statement": null, "status": null, "type": "AA001" }, { "bizCode": "AA", "code": "AA001001", "extendInfo": null, "level": 0, "refreshTime": 1498060800000, "settlement": true, "statement": null, "status": null, "type": "AA001" }, { "bizCode": "AC", "code": "AC001001", "extendInfo": null, "level": 0, "refreshTime": 1498060800000, "settlement": true, "statement": null, "status": null, "type": "AC001" }, { "bizCode": "AH", "code": "AH001002", "extendInfo": null, "level": 0, "refreshTime": 1498060800000, "settlement": true, "statement": null, "status": null, "type": "AH001" } ], "watchList_isMatched": null }, "creditRemark": { "watchList_zmWatchListDetail": "行业关注清单", "watchList_isMatched": "是否匹配" } }
再控制台显示是下面的样子:
{
"custId": "fc2ac08f-3261-407c-b544-c3797b30509b",
"extId": null,
"operatorId": "",
"retCode": null,
"retMsg": null,
"respSysCode": null,
"respSysCodeMsg": null,
"respBizCode": null,
"respBizCodeMsg": null,
"creditData": {
"watchList_zmWatchListDetail": [{
"bizCode": "AC",
"code": "AC005001",
"extendInfo": null,
"level": 0,
"refreshTime": 1498060800000,
"settlement": true,
"statement": null,
"status": null,
"type": "AC005"
}, {
"bizCode": "AA",
"code": "AA001012",
"extendInfo": null,
"level": 0,
"refreshTime": 1498060800000,
"settlement": true,
"statement": null,
"status": null,
"type": "AA001"
}, {
"bizCode": "AA",
"code": "AA001001",
"extendInfo": null,
"level": 0,
"refreshTime": 1498060800000,
"settlement": true,
"statement": null,
"status": null,
"type": "AA001"
}, {
"bizCode": "AC",
"code": "AC001001",
"extendInfo": null,
"level": 0,
"refreshTime": 1498060800000,
"settlement": true,
"statement": null,
"status": null,
"type": "AC001"
}, {
"bizCode": "AH",
"code": "AH001002",
"extendInfo": null,
"level": 0,
"refreshTime": 1498060800000,
"settlement": true,
"statement": null,
"status": null,
"type": "AH001"
}
],
"watchList_isMatched": null
},
"creditRemark": {
"watchList_zmWatchListDetail": "行业关注清单",
"watchList_isMatched": "是否匹配"
}
}
这样以json的格式树状显示是不是清晰多了.可是在控制台我们的开发工具会给我们以json的格式显示好,但是浏览器这样的前端页面显示的就是一长串的字符串了,看着十分不清晰,那么怎么在前端jquery代码怎么写呢?当然可以用插件,给出一个json格式的字符串,然后用插件直接打印出,还有漂亮的样式,可这里小编还在研究中,下面说一下花了近两天研究出来的蹩脚代码吧:
1,前端代码:
<div id=”table1″></div>
是一个简单的div,用于将整理好的字符串形式的html代码追加到此div下;
2,jquery代码
<script>
var jsonObjw=json1;<!--json是后台传来的数据,即文章最上面的一串json格式的字符串-->
var level=0; <!--用来记录打印多级分支的前面的空格数-->
showall(jsonObjw,level); <!--jquery函数,将数据和记录的空格数作为两个入参-->
function showall(jsonObj,forNum){
for(var p in jsonObj){ <!-- 循环遍历json数据,p想到与键值对的key-->
if((typeof jsonObj[p]) == "object" && jsonObj[p] !=null){<!--如果键值对的值的类型是"object",则需要递归显示其下面的数据.即对象类型说明他还有下级,这里类似文件中的目录.-->
for(var i=0;i<forNum;i++){ <!-- 打印每行数据前需要的空格-->
parent = parent + " ";<!-- parent相当于java中的静态字符串,将html代码追加到parent中.本想使用tab键空格,可不知道怎么使用,就用四个空格代替-->
}
parent= parent+"<strong>"+p+"</strong>"+ <!-- 如果是目录则加粗显示.并只显示key值.如果没有key值会自动用0,1,2,代替-->
"<br />";<!--换行-->
showall(jsonObj[p],forNum+1);<!--使用递归,每多一个深一层子级就多循环一次空格-->
}else{
if(jsonObj[p]==null || jsonObj[p]==""){<!--如果不是'目录'就直接追加到parent中>
for(var i=0;i<forNum;i++){
parent = parent + " ";
}
parent= parent+ p + " : " + ' '+
"<br />";
}else{
for(var i=0;i<forNum;i++){
parent =parent + " ";
}
parent=parent+ p + " : " + jsonObj[p] +
"<br />";
}
}
}
$("#table1").append(parent);<!--将最终的parent追加到id='table'的div中>
parent="";<!-- 重置parent,保证下次后台传来的数据不会追加到之前的html中.>
}
</script>
3,最后显示到界面的样子就是:
大概就是这个样子,虽然也不是很好看,但是比打印一坨字符串好看多了.
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106330.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...