遞迴取JSON資料
阿新 • • 發佈：2018-12-15
示例一：
<!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>