I'm trying to make menu json to show tree list.
Main object is flat array to tree Array.
I tried to make it tree array but it is hard to make more levels.
menuType is that menu has children if type is 'M' and displayLevel is tree level, displaySeq is sequence.
[
{"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"}
]
This array is not parent Id style. and I need to make it parent Id style for displaying tree list.
I tried to make json to tree array only 3 level
The more level, the more hard-cording needed. It is too hard to make tree array.
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;
}
This code problem is the more level, it can't make children(level 4, 5 etc...)
I treid to refer Build tree array from flat array in javascript .
But It is not fit to my solution...
So I need your help to make level easily with above menu array style.
Added
