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);