JS使用递归方法解析多层嵌套json接口的方法

﹏ヽ暗。殇╰゛Y 2023-02-14 10:42 282阅读 0赞

实现：动态加载后台管理项目菜单功能，并且json为三层嵌套对象

如图所示json返回：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70][]

解析如上所示多层json对象，一开始我直接用each方法解析,发现不是name就是url获取不到一直报错undefined

$.each(json, function (index) {
 var result = '';
 var json = data.data;
 var name = json[index].name;
 var childMenu = json[index].childMenu;
 var t = '';
 if (childMenu.length > 0) {
 $.each(childMenu, function (i) {
 var name2 = childMenu[i].name; //莫名其妙报错这个name找不到
 var childMenu = childMenu[i].childMenu;
 var f = '';
 if (childMenu.length > 0) {
 $.each(childMenu, function (j) {
 var URL = childMenu[j].url;
 var name3 = childMenu[j].name;
 f += '<li><a _href=' + URL + '>' +
 '' +
 '<cite>' + name3 + '</cite>' +
 '</a></li>';
 })
 }
 t += '<li>\n' +
 '<a href="javascript:;">\n' +
 '\n' +
 '<cite>' + name2 + '</cite>\n' +
 '\n' +
 '</a>\n' +
 '<ul class="sub-menu subMenu03">+f+</ul>\n' +
 '</li>';
 })
 }
 result += '<li>\n' +
 '<a href="javascript:;">\n' +
 '\n' +
 '<cite>' + name + '</cite>\n' +
 '\n' +
 '</a>\n' +
 '<ul class="sub-menu subMenu02">+t+</ul>\n' +
 '/li>';
 });
 $("#nav").html(result);

还试了分开每层循环遍历的方法最多只能解析到第一层的name，二三层直接报错undefined

后来试了递归的方法遍历才成功，主要是对递归还不太熟悉所以希望各位有更好更便捷的方法多多指点。

if (data.status == 1) {
 var result = '';
 var json = data.data;
 result = menuFunc(json, 1);
 $("#nav").html(result);
 }
 
 // 递归方法 data数据 level 层级 1开始第一层
 function menuFunc(data, level) {
 var _html = "";
 // 层级类名
 let obj = {
 1: "sub-menu subMenu02",
 2: "sub-menu subMenu03",
 3: "",
 };
 // 循环数组
 $.each(data, function (index, item) {
 // 判断有没有下层菜单
 if (item.childMenu.length > 0) {//再次调用 并且菜单层级+1 下层菜单在这里调用
 _html += `<li><a><cite>${item.name}</cite></a><ul class="${obj[level]}">${menuFunc(item.childMenu, level + 1)}</ul></li>`
 } else {
 // 没有下层菜单 直接渲染
 _html += `<li><a _href="${item.url}">${item.name}</a></li>`
 }
 });
 return _html;
 }

希望各位同学有更好解析多层json的方法多多推荐共同学习~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602153519994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5cF9jb21lb24=,size_16,color_FFFFFF,t_70