前一段时间做了一个小项目,要加一个json数据自动绑定前台表单的功能,类似于jquery-easyui里面的数据绑定(给它一个json对象,就能自动解析里面有的数据。json数据的key对于表单的name属性,也可以是id或自己定义的标签属性,把key对应的值赋给对应名称的表单)。百度了许多JSON解析,都是前提知道json结构的情况下的解析,毛线的一点用都没有,最后看了一篇博客,明白了解析key和值的原理,自己写了一个简单的coding(里面的json数据从网上copy过来的,哈哈),废话不多说,上代码:
<!DOCTYPE html>
<head>
<title>递归解析无限层级JSON的所有key和value</title>
<script src="jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<ul id="menu"></ul>
</div>
<script>
var menulist = [{
"menulist": [
{ "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },
{ "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":
[
{ "MID": "M003", "MName": "新车", "Url": "#", "menulist":
[
{ "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },
{ "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }
]
},
{ "MID": "M004", "MName": "二手车", "Url": "#", "menulist": "" },
{ "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }
]
},
{ "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }
]
}];
$(function() {
parseJson(menulist);
});
function parseJson(jsonObj) {
if( typeof(jsonObj) == "undefined" ){
alert('JSON对象不能为空!');
}
//遍历第一层数据
for (var topKey in jsonObj) {
//如果对象类型为object类型且数组长度大于0,递归继续解析
if (jsonObj[topKey].length > 0 && typeof(jsonObj[topKey]) == "object") {
parseJson(jsonObj[topKey]);
} else {
//如果对象类型为object类型,依次循环取出所有元素
if (typeof(jsonObj[topKey]) == "object") {
for(var childKey in jsonObj[topKey]) {
//如果对象类型为object类型,递归继续解析
if (typeof(jsonObj[topKey][childKey]) == "object") {
parseJson(jsonObj[topKey][childKey]);
} else {
//如果对象类型为object类型,直接取元素名称和值
$("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
}
}
} else{
//如果对象类型为object类型,直接取元素名称和值
$("#menu").append("<li>" + childKey + ":" + jsonObj[topKey][childKey] + "</li>");
}
}
}
}
</script>
</body>
</html>
代码很简单,只用了for循环、递归以及一些json的知识点,jquery用的熟练的很容易就能看懂(不明白的可以参考这篇博客,地址),有什么需要改进的或有什么考虑不全的欢迎指出。