JS的有关递归的知识点(数据无限级联的实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
const intention_common = {
"data": {
"list": [{
"id": 61,
"name": "教育",
"parent_id": 0,
"parent_name": "",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 15,
"name": "早教与学前教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 3,
"name": "中小学教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 88,
"name": "小学辅导",
"parent_id": 3,
"parent_name": "中小学教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 81,
"name": "初中辅导",
"parent_id": 3,
"parent_name": "中小学教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 105,
"name": "高中辅导",
"parent_id": 3,
"parent_name": "中小学教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 18,
"name": "职业教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 327,
"name": "IT培训与考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 582,
"name": "UI设计",
"parent_id": 327,
"parent_name": "IT培训与考试",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 442,
"name": "编程语言",
"parent_id": 327,
"parent_name": "IT培训与考试",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 511,
"name": "企业员工培训",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 594,
"name": "MBA\/EMBA",
"parent_id": 511,
"parent_name": "企业员工培训",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 330,
"name": "医学资格培训与考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 338,
"name": "教师资格考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 595,
"name": "财经考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 318,
"name": "会计师资格考试",
"parent_id": 595,
"parent_name": "财经考试",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 376,
"name": "司法考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 399,
"name": "建造师资格考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 98,
"name": "驾驶培训与考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 492,
"name": "汽修培训与考试",
"parent_id": 18,
"parent_name": "职业教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 24,
"name": "学历教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 313,
"name": "四六级英语考试",
"parent_id": 24,
"parent_name": "学历教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 469,
"name": "考研英语考试",
"parent_id": 24,
"parent_name": "学历教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 520,
"name": "考研辅导",
"parent_id": 24,
"parent_name": "学历教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 155,
"name": "非学历教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 460,
"name": "在职教育",
"parent_id": 155,
"parent_name": "非学历教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 414,
"name": "成人教育",
"parent_id": 155,
"parent_name": "非学历教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 75,
"name": "语言培训",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 319,
"name": "少儿英语",
"parent_id": 75,
"parent_name": "语言培训",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 216,
"name": "青少年英语",
"parent_id": 75,
"parent_name": "语言培训",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 248,
"name": "成人英语",
"parent_id": 75,
"parent_name": "语言培训",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 303,
"name": "其他小语种",
"parent_id": 75,
"parent_name": "语言培训",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 349,
"name": "日语",
"parent_id": 303,
"parent_name": "其他小语种",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 375,
"name": "韩语",
"parent_id": 303,
"parent_name": "其他小语种",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 96,
"name": "出国留学\/移民",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 312,
"name": "雅思托福",
"parent_id": 96,
"parent_name": "出国留学\/移民",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 877,
"name": "兴趣教育",
"parent_id": 61,
"parent_name": "教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 881,
"name": "科技与编程",
"parent_id": 877,
"parent_name": "兴趣教育",
"city_level": "CITY_LEVEL_NONE"
}, {
"id": 197,
"name": "旅游",
"parent_id": 0,
"parent_name": "",
"city_level": "CITY_LEVEL_NONE"
}]
},
"code": 0,
"message": "",
"message_cn": ""
}
function toTreeData(data, pid) {
function tree(id) {
let arr = []
data.filter(item => {
return item.parent_id === id;
}).forEach(item => {
let {...a} = item;
a.children = tree(item.id);
arr.push(a)
})
return arr.length > 0 ? arr : []
}
return tree(pid) // 第一级节点的父id，是null或者0，视情况传入
}
var tmp = toTreeData(intention_common.data.list, 0);
console.log(tmp);
</script>
</html>