在项目开发中;在和后端配合开发时;会遇到这样的需求,将后端返回的列表集合按照父子关系转为树形结构;进行展示
这个时候就需要我们使用js将从后端获取到的数据进行转化了。
假设后端获取到的数据为:
var treeList = [ { title: '系统管理', parentName: '', parentId: 0, id: 1, }, { title: '菜单管理', parentName: '系统管理', parentId: 1, id: 11, }, { title: '菜单新增', parentName: '菜单管理', parentId: 11, id: 111, }, { title: '菜单编辑', parentName: '菜单管理', parentId: 11, id: 112, }, { title: '菜单删除', parentName: '菜单管理', parentId: 11, id: 113, }, { title: '角色管理', parentName: '系统管理', parentId: 1, id: 22, }, { title: '角色新增', parentName: '角色管理', parentId: 22, id: 221, }, { title: '角色编辑', parentName: '角色管理', parentId: 22, id: 222, }, { title: '角色删除', parentName: '角色管理', parentId: 22, id: 223, }, { title: '用户管理', parentName: '系统管理', parentId: 1, id: 33, }, { title: '用户新增', parentName: '用户管理', parentId: 33, id: 331, }, { title: '用户编辑', parentName: '用户管理', parentId: 33, id: 332, }, { title: '用户删除', parentName: '用户管理', parentId: 33, id: 333, } ];
我们就这一数据进行树形结构的转化
首先每个对象里面都有自己的id和对象父级的id(parentId);所以在进行转化时;利用好这两个id就可以达到结构的转变了。
function jsonToTree(lists, id, parentId) { var idList = {}, treeList = []; for (var i = 0, len = lists.length; i < len; i++) { //生成一个以id为键的对象 idList[lists[i][id]] = lists[i] } for (var j = 0, len1 = lists.length; j < len1; j++) { var aVal = lists[j]; var aValParent = idList[aVal[parentId]]; //如果aValParent存在;就说明当前的aVal是aValParent的孩子 if (aValParent) { if ('chindren' in aValParent) { aValParent['children'].push(aVal) } else { aValParent['children'] = []; aValParent['children'].push(aVal) } } else { treeList.push(aVal) } } return treeList }