<!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>
<script>
const SourceArr = [
{ id: '1', parentId: 0, name: '标题1' },
{ id: '1.1', parentId: '1', name: '标题1-1' },
{ id: '1.1.1', parentId: '1.1', name: '标题1-1-1' },
{ id: '2', parentId: 0, name: '标题2' },
{ id: '2.1', parentId: '2', name: '标题2-1' },
{ id: '2.2', parentId: '2', name: '标题2-2' },
{ id: '2.2.2', parentId: '2.2', name: '标题2-2-2' },
{ id: '3', parentId: 0, name: '标题3' },
]
function getData(arr) {
return arr.filter(function (item) {
item.children = arr.filter(function (child) {
return item.id === child.parentId
})
return item.parentId === 0
})
}
const TargetArr = getData(SourceArr)
console.log('TargetArr', TargetArr)
</script>
</body>
</html>
递归方法
<!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>
<script>
var input = [
{
id: 1,
val: "学校",
parentId: null
},
{
id: 2,
val: "班级1",
parentId: 1,
},
{
id: 3,
val: "班级2",
parentId: 1,
},
{
id: 4,
val: "学生1",
parentId: 2,
},
{
id: 5,
val: "学生2",
parentId: 3,
},
{
id: 6,
val: "学生3",
parentId: 3,
},
];
var newInput = []
function setTree(arr, target, id) {
arr.forEach(function (item) {
if (item.parentId === id) {
item.children = []
setTree(input, item.children, item.id)
target.push(item)
!item.children.length && delete item.children
}
})
}
setTree(input, newInput, null)
console.log(newInput)
var arr = [
{
id: 1,
val: "学校",
parentId: null,
children: [
{
id: 2,
val: "班级1",
parentId: 1,
children: [
{
id: 4,
val: "学生1",
parentId: 2,
},
],
},
{
id: 3,
val: "班级2",
parentId: 1,
children: [
{
id: 5,
val: "学生2",
parentId: 3,
},
{
id: 6,
val: "学生3",
parentId: 3,
},
],
},
],
},
];
/**
请将上述数组转换为:
[
{
id: 1,
val: "学校",
parentId: null,
children: [
{
id: 2,
val: "班级1",
parentId: 1,
children: [
{
id: 4,
val: "学生1",
parentId: 2,
},
],
},
{
id: 3,
val: "班级2",
parentId: 1,
children: [
{
id: 5,
val: "学生2",
parentId: 3,
},
{
id: 6,
val: "学生3",
parentId: 3,
},
],
},
],
},
];
*/
</script>
</body>
</html>