示例一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
var data = [{
"id": "01",
"name": "中國",
"items": [{
"id": "0101",
"name": "北京市",
"items": [{
"id": "0101",
"name": "東城區"
}]
}, {
"id": "0102",
"name": "郴州市",
"items": [{
"id": "0101",
"name": "安仁縣"
}]
}]
},
{
"id": "02",
"name": "美國"
}];
$("#treeRoot").html(TreeHtml(data));
});
var strHtml = "";
//遞歸實現樹結構
function TreeHtml(data) {
$.each(data, function (key, value) {
strHtml += '<li id="li' + value.id + '"> ' + value.name;
if (value.items && value.items.length > 0) {
strHtml += '<ul id="ul' + value.id + '">';
TreeHtml(value.items);
strHtml += '</ul>';
}
strHtml += ' </li>';
});
return strHtml;
}
</script>
</head>
<body>
<div class="Tree">
<ul id="treeRoot">
</ul>
</div>
</body>
</html>
示例二
<!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>