jquery前端递归打印出树状结构的多层复杂map或json键值对数据

从后台传来一组多层结构的复杂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,最后显示到界面的样子就是:

大概就是这个样子,虽然也不是很好看,但是比打印一坨字符串好看多了.