前言: 工作中需要将一个扁平的数组转换为嵌套的树状结构的数组
// 原始数据结构
let region = [
['北京市','北京市','东城区'],
['北京市','北京市','西城区'],
['北京市','北京市'],
['四川省','成都市'],
['四川省','成都市','高新区'],
]
// 理想数据结构
list = [{
id: "北京市0",
index: 0,
label: "北京市",
pid: "",
children: [{
id: "北京市1",
index: 1,
label: "北京市",
pid: "北京市0",
children: [{
id: "东城区2",
index: 2,
label: "东城区",
pid: "北京市1"
},
{
id: "西城区2",
index: 2,
label: "西城区",
pid: "北京市1"
}
]
}]
},
{
id: "四川省0",
index: 0,
label: "四川省",
pid: "",
children: [{
id: "成都市1",
index: 1,
label: "成都市",
pid: "四川省0",
children: [{
id: "高新区2",
index: 2,
label: "高新区",
pid: "成都市1"
}
]
}]
}]
处理方法:
第一步
let dataList = []
region.forEach(item => {
let isChild = item.length
item.forEach((ele, index) => {
let obj = {
label: ele,
index,
id: `${ele}${index}`,
pid: index === 0 ? '':`${item[index-1]}${index - 1}`
}
dataList.push(obj)
})
})
// 执行以上代码后 dataList数组的结构为:
[
{label: '北京市', index: 0, id: '北京市0', pid: ''},
{label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
{label: '东城区', index: 2, id: '东城区2', pid: '北京市1'},
{label: '北京市', index: 0, id: '北京市0', pid: ''},
{label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
{label: '西城区', index: 2, id: '西城区2', pid: '北京市1'},
{label: '北京市', index: 0, id: '北京市0', pid: ''},
{label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
{label: '四川省', index: 0, id: '四川省0', pid: ''},
{label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
{label: '四川省', index: 0, id: '四川省0', pid: ''},
{label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
{label: '高新区', index: 2, id: '高新区2', pid: '成都市1'}
]
第二步:(去重)
// 去重
let newobj = {};
dataList = dataList.reduce((preVal, curVal) => {
newobj[curVal.label+curVal.index+curVal.pid] ? '' : newobj[curVal.label+curVal.index+curVal.pid] = preVal.push(curVal);
return preVal
}, [])
// 执行以上代码后 dataList数组的结构为:
[
{label: '北京市', index: 0, id: '北京市0', pid: ''},
{label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
{label: '东城区', index: 2, id: '东城区2', pid: '北京市1'},
{label: '西城区', index: 2, id: '西城区2', pid: '北京市1'},
{label: '四川省', index: 0, id: '四川省0', pid: ''},
{label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
{label: '高新区', index: 2, id: '高新区2', pid: '成都市1'}
]
第三步:(递归生成树形结构)
/**
*@param { Array } list 需要转的数组
*@param { String } rootValue 根节点的id
*/
function transListToTreeData(list, rootValue) {
var arr = []
list.forEach(item => {
if (item.pid === rootValue) {
const children = transListToTreeData(list, item.id)
if (children.length) {
item.children = children
}
arr.push(item)
}
})
return arr
}
transListToTreeData(dataList,'') // 调用方法
// 执行以上代码后 dataList数组的结构为:
list = [{
id: "北京市0",
index: 0,
label: "北京市",
pid: "",
children: [{
id: "北京市1",
index: 1,
label: "北京市",
pid: "北京市0",
children: [{
id: "东城区2",
index: 2,
label: "东城区",
pid: "北京市1"
},
{
id: "西城区2",
index: 2,
label: "西城区",
pid: "北京市1"
}
]
}]
},
{
id: "四川省0",
index: 0,
label: "四川省",
pid: "",
children: [{
id: "成都市1",
index: 1,
label: "成都市",
pid: "四川省0",
children: [{
id: "高新区2",
index: 2,
label: "高新区",
pid: "成都市1"
}
]
}]
}]
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/64748.html