JS递归遍历Json数组，使其变成具有父子结构的layui导航栏

这里笔者使用layui框架搭建垂直导航栏
原始数据如下：

var arr = [
	{menuId:xx1, pMenuId:"000000", url:'/pages/xx1.html', title:'首页', icon="icon-home"},
	{menuId:xx2, pMenuId:"000000", url:'/pages/xx2.html', title:'人员', icon="icon-people"},
	{menuId:xx3, pMenuId:xx2, url:'/pages/xx3.html', title:'新增人员', icon="icon-addPeople"},
	{menuId:xx4, pMenuId:"000000", url:'/pages/xx4.html', title:'统计', icon="icon-cal"},
	{menuId:xx5, pMenuId:xx4, url:'/pages/xx5.html', title:'大区统计', icon="icon-dqtotal"},
	{menuId:xx6, pMenuId:xx5, url:'/pages/xx6.html', title:'华东大区', icon="icon-huadong"},
	......
];

递归方法

var getChildren = function(data,root){
	var items = [];
	for(var i = 0; i < data.length; i++){
		if(root == data[i].pMenuId){
			data[i].items = getChildren(data,data[i].menuId);
			
			// 把数据封装为 layui构建导航栏所需的items
			var temp_item={
				key:data[i].menuId,
				title:data[i].menuName,
				iconClass:data[i].icon,
				href:data[i].url,
				items:data[i].items
			}
			items.push(temp_item);
		}
	}
	return items;
}

// 或者直接遍历data中的数据 看需求选择 其实这种更方便。
/*
$(data).each(function() {
	if (this.menuLevel == '1') {
		menu[this.menuId] = [];
	} else {
		if (menu[this.pMenuId])
			menu[this.pMenuId].push(this);
	}
});
*/

// 0 是因为 父节点的pid="000000"  把数组中的节点关系变成json格式的数组
var data_items = getChildren(arr,0);
// 最终得到的数据是具有父子结构的json数组。

结果数据

data_items:[
{menuId:xx1, pMenuId:"000000", url:'/pages/xx1.html', title:'首页', icon="icon-home"},
{menuId:xx2, pMenuId:"000000", url:'/pages/xx2.html',title:'人员', icon="icon-people", 
 	items:[{
 		menuId:xx3, pMenuId:xx2, url:'/pages/xx3.html', title:'新增人员', icon="icon-addPeople"
 	}]
 },
{menuId:xx4, pMenuId:"000000", url:'/pages/xx4.html', title:'统计', icon="icon-cal" 
	items:[{
		menuId:xx5, pMenuId:xx4, url:'/pages/xx5.html', title:'大区统计', icon="icon-dqtotal" ,
		items:[{
			menuId:xx6, pMenuId:xx5, url:'/pages/xx6.html', title:'华东大区', icon="icon-huadong"	
		}]
    }]
},
]

// 最后使用layui自带的方法构建 导航栏
layui.use(['jquery', 'menu', 'fixbar'], function () {
	var $ = layui.$;
	$(document).ready(function () {
		var nav = layui.menu.render({
			elem: "#menu",
			//type: 'nav',
			theme: 'dark',
			width: 250,
			autoNav: false,
			onClick: function (item) {
				 if (item.href) {
                     if (item.target) {
                         window.open(item.href);
                     } else {
                         $('#iframe').attr('src', item.href);
                     }
                 }
			},
			items:data_items,
		}); 
	});
});