JavaScript递归遍历json数组并层级显示级联菜单

1. 先定义一个数组结构(一般是后端返回的结构)

id：主键ID
pid：父类id（所属的父级ID）

var treeData = [
   { id: 1, name: '第一级数据1', sex: 1, pid: -1 },
   { id: 2, name: '第一级数据2', sex: 2, pid: -1 },
   { id: 3, name: '第二级数据1', sex: 2, pid: 1 },
   { id: 4, name: '第二级数据2', sex: 1, pid: 2 },
   { id: 5, name: "第三级数据3", sex: 1, pid: 3 },
   { id: 6, name: "第三级数据1", sex: 1, pid: 3 },
   { id: 7, name: "第三级数据2", sex: 1, pid: 3 },
   { id: 8, name: "第四级数据1", sex: 1, pid: 7 },
];

2. 输出的结果

3.完整实现代码

var treeData = [
    { id: 1, name: '第一级数据1', sex: 1, pid: -1 },
    { id: 2, name: '第一级数据2', sex: 2, pid: -1 },
    { id: 3, name: '第二级数据1', sex: 2, pid: 1 },
    { id: 4, name: '第二级数据2', sex: 1, pid: 2 },
    { id: 5, name: "第三级数据1", sex: 1, pid: 3 },
    { id: 6, name: "第三级数据2", sex: 1, pid: 3 },
    { id: 7, name: "第三级数据3", sex: 1, pid: 3 },
    { id: 8, name: "第四级数据1", sex: 1, pid: 7 },
];
var getChildren = function (data, root) {
    var children = [];
    for (var i = 0; i < data.length; i++) {
        if (root == data[i].pid) {
            data[i].children = getChildren(data, data[i].id);
            children.push(data[i]);
        }
    }
    return children;
}
var childData = getChildren(treeData, -1);
console.log(childData);