JS前端二维数组生成树形结构示例详解
更新时间：2022年09月15日 11:55:15 作者：RealPluto
这篇文章主要为大家介绍了JS前端二维数组生成树形结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
问题描述
前端在构建国家的省市区结构时，接口返回的不是树形结构，这个时候就需要我们进行转化。以下数据为例
[
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001",
"name": "上城区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002",
"name": "下城区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"name": "杭州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003",
"name": "临安区",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002",
"name": "宁波市",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "温州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002",
"name": "平阳县",
"districtType": "HUADONG",
"districtTypeName": null
}
],
[
{
"districtId": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"name": "浙江省",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"name": "温州市",
"districtType": "HUADONG",
"districtTypeName": null
},
{
"districtId": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003",
"name": "文成县",
"districtType": "HUADONG",
"districtTypeName": null
}
]
]
[
{
"label": "浙江省",
"value": 1586533852834,
"parentCode": "000",
"nodeCode": "000001",
"children": [
{
"label": "杭州市",
"value": 1586533872922,
"parentCode": "000001",
"nodeCode": "000001001",
"children": [
{
"label": "上城区",
"value": 1586533872940,
"parentCode": "000001001",
"nodeCode": "000001001001"
},
{
"label": "下城区",
"value": 1586533872961,
"parentCode": "000001001",
"nodeCode": "000001001002"
},
{
"label": "临安区",
"value": 1586533872980,
"parentCode": "000001001",
"nodeCode": "000001001003"
}
]
},
{
"label": "宁波市",
"value": 1586533873196,
"parentCode": "000001",
"nodeCode": "000001002"
},
{
"label": "温州市",
"value": 1586533873432,
"parentCode": "000001",
"nodeCode": "000001003",
"children": [
{
"label": "平阳县",
"value": 1586533873468,
"parentCode": "000001003",
"nodeCode": "000001003002"
},
{
"label": "文成县",
"value": 1586533873486,
"parentCode": "000001003",
"nodeCode": "000001003003"
}
]
}
]
}
]
实现步骤
① 观察输入的数据结构为二维数组，每个数组中存储了省市区的全部数据，此时首先需要将二维数组一维化，以取得所有的节点数据，用于后续构建树形结构。
let arr = [].concat.apply([], data)
② 得到所有需要构建树形结构的数据后，发现数组中存在重复数据
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
}
③ 数据规范化处理，把所有的数据处理成需要的节点数据
arrayToTree(data, rootNode) {
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.数组规范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
}
④ 采用递归的方式构建树形结构
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
// 构建父节点
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
// 构建子节点
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
// 删除空叶子节点
if (item.children.length === 0) {
delete item.children;
}
})
return list;
}
完整代码
arrayToTree(data, rootNode, {label = 'label', value = 'value',parentCode = 'parentCode', nodeCode = 'nodeCode', children = ''} = {}) {
// 1.数组去重
let temp = {}
let reduceArr = data.reduce((current, next) => {
temp[next.districtId] ? "" : temp[next.districtId] = current.push(next)
return current
},[])
// 2.数组规范化
let result = []
reduceArr.forEach(item => {
result.push({
label:item.name,
value:item.districtId,
parentCode:item.parentCode,
nodeCode:item.nodeCode,
children: []
})
})
// 3.构建树形结构
return this.getTreeList(result,rootNode,[],{
label,value,parentCode,nodeCode,children
});
},
// 递归构建树形结构
getTreeList(data, rootNode, list,{label, value,parentCode, nodeCode, children}) {
data.forEach(item =>{
if (item.parentCode === rootNode) {
list.push(item)
}
})
list.forEach(item => {
item.children = []
this.getTreeList(data, item.nodeCode, item.children,{label, value,parentCode, nodeCode, children});
if (item.children.length === 0) {
delete item.children;
}
})
return list;
},以上就是JS前端二维数组生成树形结构示例详解的详细内容，更多关于JS二维数组树形结构的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了手把手教你从0搭建前端脚手架详解,脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件,需要的朋友可以参考下2023-03-03
今天小编就为大家分享一篇关于JavaScript中五种流行的开源机器学习框架，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
这篇文章主要介绍JS 基本概念，对于初学者来说，Javascript 乍一看似乎很容易，因为它的类似于 C 的语法，但不管它的运行方式如何，对语言 (ESNext) 及其框架所做的不断变化可能会让初学者不知所措。下面我们就来看JS 初学者怎么入门吧2021-10-10
这篇文章主要介绍了JavaScript文档对象模型DOM，当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。下面来看看文章得详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要来带大家探索JavaScript的未来，关于模式匹配的引入为编程体验带来革命性变化分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要介绍了微信小程序 picker-view 组件详解及简单实例的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了微信小程序canvas写字板效果及实例的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了微信小程序 同步请求授权的详解的相关资料,在小程序首次打开的时候，我需要同时请求获取多个权限，由用户逐一授权，这样的需求实现，需要的朋友可以参考下2017-08-08
微信小程序 出现47001 data format error原因解决办法
这篇文章主要介绍了微信小程序 出现47001 data format error原因解决办法的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了微信小程序 选择器（时间，日期，地区）实例详解的相关资料,这里提供了实例代码及实现效果图，帮助大家学习理解这部分知识，需要的朋友可以参考下2016-11-11
最新评论