根据后台数据结构,构建搜索目录树
效果图:
数据源
const data = [
{
"categoryidf": "761525000288210944",
"categoryids": "766314364226637824",
"menunamef": "经济运行",
"menunames": "经济运行总览",
"tempname": "南沙区XXXX年XX季度经济运行情况及存在问题",
"tempid": "787314277060055040",
"show_orderf": 2,
"show_orderss": 1
},
{
"categoryidf": "761525000288210944",
"categoryids": "766314364226637824",
"menunamef": "经济运行",
"menunames": "经济运行总览",
"tempname": "报告模板",
"tempid": "805483785230618624",
"show_orderf": 2,
"show_orderss": 1
},
{
"categoryidf": "761525000288210944",
"categoryids": "766314364226637824",
"menunamef": "经济运行",
"menunames": "经济运行总览",
"tempname": "南沙区经济运行分析报告-开发中勿删",
"tempid": "766692223369744384",
"show_orderf": 2,
"show_orderss": 1
},
{
"categoryidf": "761560904969097216",
"categoryids": "787329448503545856",
"menunamef": "宏观经济",
"menunames": "地区生产总值",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 1
},
{
"categoryidf": "761560904969097216",
"categoryids": "787329962872016896",
"menunamef": "宏观经济",
"menunames": "行业总览",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 2
},
{
"categoryidf": "761560904969097216",
"categoryids": "787330410567831552",
"menunamef": "宏观经济",
"menunames": "工业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 3
},
{
"categoryidf": "761560904969097216",
"categoryids": "787330779163267072",
"menunamef": "宏观经济",
"menunames": "商贸业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 4
},
{
"categoryidf": "761560904969097216",
"categoryids": "787331288074948608",
"menunamef": "宏观经济",
"menunames": "服务业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 5
},
{
"categoryidf": "761560904969097216",
"categoryids": "787331500218650624",
"menunamef": "宏观经济",
"menunames": "房地产开发业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 6
},
{
"categoryidf": "761560904969097216",
"categoryids": "787331766636646400",
"menunamef": "宏观经济",
"menunames": "建筑业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 7
},
{
"categoryidf": "761560904969097216",
"categoryids": "787332016487141376",
"menunamef": "宏观经济",
"menunames": "进出口",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 8
},
{
"categoryidf": "761560904969097216",
"categoryids": "787332232145670144",
"menunamef": "宏观经济",
"menunames": "固定资产投资",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 9
},
{
"categoryidf": "761560904969097216",
"categoryids": "787332439809855488",
"menunamef": "宏观经济",
"menunames": "派生产业",
"tempname": null,
"tempid": null,
"show_orderf": 3,
"show_orderss": 10
},
{
"categoryidf": "767696419078410240",
"categoryids": null,
"menunamef": "营商环境",
"menunames": null,
"tempname": null,
"tempid": null,
"show_orderf": 4,
"show_orderss": 0
},
{
"categoryidf": "763705116242087936",
"categoryids": null,
"menunamef": "数字经济",
"menunames": null,
"tempname": null,
"tempid": null,
"show_orderf": 5,
"show_orderss": 0
},
{
"categoryidf": "763705094125522944",
"categoryids": "787332966232756224",
"menunamef": "产业经济",
"menunames": "产业总览",
"tempname": null,
"tempid": null,
"show_orderf": 5,
"show_orderss": 1
},
{
"categoryidf": "763705094125522944",
"categoryids": "807545774656327680",
"menunamef": "产业经济",
"menunames": "产业链图谱",
"tempname": "系列产业研究报告标准版本",
"tempid": "807546080970543104",
"show_orderf": 5,
"show_orderss": 2
},
{
"categoryidf": "763705094125522944",
"categoryids": "787333327861452800",
"menunamef": "产业经济",
"menunames": "人才和创新资源",
"tempname": null,
"tempid": null,
"show_orderf": 5,
"show_orderss": 3
},
{
"categoryidf": "767696724260163584",
"categoryids": null,
"menunamef": "企业发展",
"menunames": null,
"tempname": null,
"tempid": null,
"show_orderf": 6,
"show_orderss": 0
},
{
"categoryidf": "767696857580310528",
"categoryids": "777906003562860544",
"menunamef": "智慧招商",
"menunames": "演示",
"tempname": "南沙区经济运行分析报告-演示使用勿删",
"tempid": "777906168692609024",
"show_orderf": 7,
"show_orderss": 2
},
{
"categoryidf": "786523422359425024",
"categoryids": null,
"menunamef": "经济韧性评估",
"menunames": null,
"tempname": null,
"tempid": null,
"show_orderf": 8,
"show_orderss": 0
}
]
转换为树目录结构
// 定义一个函数来构建层级结构
function buildHierarchy(data: any[]): any[]{
const hierarchy: any[] = [];
const map = new Map<string, any>();
console.log('map',map);
// 遍历数据,构建 map
data.forEach(item => {
if (!map.has(item.menunamef)) {
map.set(item.menunamef, {
key:item.categoryidf,
label: item.menunamef,
children: []
});
hierarchy.push(map.get(item.menunamef));
}
if (item.menunames) {
const parent = map.get(item.menunamef);
if (!parent.children.find(child => child.label === item.menunames)) {
parent.children.push({
key:item.categoryids,
label: item.menunames,
children: []
});
}
}
if (item.tempname) {
const parent = map.get(item.menunamef);
const subParent = parent.children.find(child => child.label === item.menunames);
if (subParent) {
subParent.children.push({
label: item.tempname,
key: item.tempid
});
} else {
parent.children.push({
label: item.tempname,
key: item.tempid
});
}
}
});
return hierarchy;
}
const result = buildHierarchy(data);