// 数据源
const source = [
{ id: 1, name: '张三', pid: 0 },
{ id: 2, name: '李四', pid: 1 },
{ id: 3, name: '王五', pid: 2 },
{ id: 4, name: '赵六', pid: 3 },
{ id: 5, name: '陈七', pid: 4 },
{ id: 6, name: '谢八', pid: 4 },
{ id: 7, name: '林一', pid: 1 },
]
双重循环,判断元素的id是否与父节点Id是否相同,若相同,则为父节点添加childen属性,属性值为当前节点
for (let i = 0; len = source.length, i < len; i++) {
let arrTemp = []
for (let j = 0; j < source.length; j++) {
if (source[i].id == source[j].pid) {
source[i].childen = arrTemp
arrTemp.push(source[j])
}
}
}
最后取出第一层的数据(pid==0)就可以了
const result = []
for (let i = 0; i < source.length; i++) {
if (source[i].pid == 0) {
result.push(source[i])
}
}
console.log(result);
源代码JS文件
// 原数据
const source = [
{ id: 1, name: '张三', pid: 0 },
{ id: 2, name: '李四', pid: 1 },
{ id: 3, name: '王五', pid: 2 },
{ id: 4, name: '赵六', pid: 3 },
{ id: 5, name: '陈七', pid: 4 },
{ id: 6, name: '谢八', pid: 4 },
{ id: 7, name: '林一', pid: 1 },
]
// 将一维数据转为树形结构
for (let i = 0; len = source.length, i < len; i++) {
let arrTemp = []
for (let j = 0; j < source.length; j++) {
if (source[i].id == source[j].pid) {
source[i].childen = arrTemp
arrTemp.push(source[j])
}
}
}
const result = []
for (let i = 0; i < source.length; i++) {
if (source[i].pid == 0) {
result.push(source[i])
}
}
console.log(result);
转换前
[
{ id: 1, name: '张三', pid: 0 },
{ id: 2, name: '李四', pid: 1 },
{ id: 3, name: '王五', pid: 2 },
{ id: 4, name: '赵六', pid: 3 },
{ id: 5, name: '陈七', pid: 4 },
{ id: 6, name: '谢八', pid: 4 },
{ id: 7, name: '林一', pid: 1 },
]
转换后
"result": [
{
"id": 1,
"name": "张三",
"pid": 0,
"childen": [
{
"id": 2,
"name": "李四",
"pid": 1,
"childen": [
{
"id": 3,
"name": "王五",
"pid": 2,
"childen": [
{
"id": 4,
"name": "赵六",
"pid": 3,
"childen": [
{
"id": 5,
"name": "陈七",
"pid": 4
},
{
"id": 6,
"name": "谢八",
"pid": 4
}
]
}
]
}
]
},
{
"id": 7,
"name": "林一",
"pid": 1
}
]
}
]