javascript - 如何以有效的方式将平面数组更改为树数组？

Question

我正在尝试制作菜单 json 以显示树列表。

主要对象是平面数组到树数组。

我试图让它成为树数组，但很难做出更多的关卡。

如果 type 为“M”且 displayLevel 为树级，则 menuType 是菜单有子级， displaySeq 是序列。

[
{"menuId":"M_SETUP_000","menuName":"Setup","menuType":"M","displayLevel":"1","displaySeq":"1"},
{"menuId":"M_SETUP_PM","menuName":"Process Management","menuType":"M","displayLevel":"2","displaySeq":"2"},
{"menuId":"PM_SETUP_001","menuName":"Site Setup","menuType":"C","displayLevel":"3","displaySeq":"3"},
{"menuId":"PM_SETUP_002","menuName":"Material Setup","menuType":"C","displayLevel":"3","displaySeq":"4"},
{"menuId":"PM_SETUP_003","menuName":"Route Setup","menuType":"C","displayLevel":"3","displaySeq":"5"},
{"menuId":"PM_SETUP_004","menuName":"Operation Setup","menuType":"C","displayLevel":"3","displaySeq":"6"},
{"menuId":"PM_SETUP_005","menuName":"Rework Route Setup","menuType":"C","displayLevel":"3","displaySeq":"7"},
{"menuId":"PM_SETUP_007","menuName":"Label Setup","menuType":"C","displayLevel":"3","displaySeq":"8"},
{"menuId":"PM_SETUP_010","menuName":"Product Plan Setup","menuType":"C","displayLevel":"3","displaySeq":"9"},
{"menuId":"PM_VIEW_016","menuName":"View Delete Lot List","menuType":"C","displayLevel":"3","displaySeq":"10"},
{"menuId":"PM_VIEW_017","menuName":"View WIP","menuType":"C","displayLevel":"3","displaySeq":"11"},
{"menuId":"PM_VIEW_018","menuName":"View WIP Lot History","menuType":"C","displayLevel":"3","displaySeq":"12"},
{"menuId":"PM_VIEW_019","menuName":"View WIP Lot List","menuType":"C","displayLevel":"3","displaySeq":"13"},
{"menuId":"PM_SETUP_011","menuName":"Product Order Setup","menuType":"C","displayLevel":"3","displaySeq":"14"},
{"menuId":"M_SETUP_BAS","menuName":"Basic","menuType":"M","displayLevel":"1","displaySeq":"15"},
{"menuId":"M_SETUP_DCA","menuName":"Data Collection && Acquisition","menuType":"M","displayLevel":"2","displaySeq":"16"},
{"menuId":"M_SETUP_DOC","menuName":"Document Control","menuType":"M","displayLevel":"3","displaySeq":"17"},
{"menuId":"M_SETUP_MON","menuName":"Monitoring","menuType":"M","displayLevel":"4","displaySeq":"18"},
{"menuId":"M_SETUP_RAS","menuName":"Resource Allocation and Status","menuType":"M","displayLevel":"5","displaySeq":"19"}
]

此数组不是父 ID 样式。我需要将其设为父 ID 样式以显示树列表。

我试图使 json 到树数组只有 3 级

级别越高，需要的硬编码就越多。制作树形数组太难了。

makeMenuJson(menu: any) {
        const navItem = [];
        let firstIndex = -1;
        let secondIndex = -1;
        let levelBackup;
        menu.forEach((menuData) => {
            if(menuData.menuType === 'M') {
                menuData['children'] = [];
            }
            if (menuData.displayLevel === '1') {
                navItem.push(menuData);
                firstIndex++;
                levelBackup = menuData.displayLevel;
            } else if (menuData.displayLevel === '2') {
                navItem[firstIndex].children.push(menuData);
                if (levelBackup === '1') {
                    secondIndex = -1;
                    levelBackup = '-1';
                }
                secondIndex++;
            } else if (menuData.displayLevel === '3') {
                navItem[firstIndex].children[secondIndex].children.push(menuData);
            }
        });
        return navItem;
    }

这个代码问题是更多的级别，它不能让孩子（4级、5级等......）

我很想从 javascript 中的平面数组中引用构建树数组。

但它不适合我的解决方案......

所以我需要你的帮助来轻松地使用上面的菜单数组样式。

---

添加

根据脚本，它只能显示到第 3 级。

标签： javascriptarraysmenutree