js-将数组对象结构转为树形结构

在项目开发中；在和后端配合开发时；会遇到这样的需求，将后端返回的列表集合按照父子关系转为树形结构；进行展示

这个时候就需要我们使用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
}