将省市区树状数据转换为扁平结构
本文介绍如何将三级树状结构的省市区数据扁平化。原始数据采用树形结构,每个节点包含代码 (code)、名称 (value) 和选中状态 (checked)。目标是根据选中状态生成一个扁平数组,包含省份、城市和区县的代码及层级信息。
原始数据结构示例:
[ { "code": "110000", "value": "北京市", "checked": "1", "children": [ { "code": "110100", "value": "北京市", "checked": "1", "children": [ {"code": "110101", "value": "东城区", "checked": "1"}, {"code": "110102", "value": "西城区", "checked": "1"} ] } ] }, { "code": "120000", "value": "天津市", "checked": "1", "children": [ { "code": "120100", "value": "天津市", "checked": "1", "children": [ {"code": "120101", "value": "和平区", "checked": "0"}, {"code": "120102", "value": "河东区", "checked": "1"} ] } ] } ]
目标扁平化数据结构示例:
[ { "provinceCode": "110000", "cityCode": null, "districtCode": null, "level": 1 }, { "provinceCode": "120000", "cityCode": "120100", "districtCode": "120102", "level": 3 } ]
转换逻辑:
采用递归遍历树状结构,根据 checked 状态判断。如果所有子节点都被选中,则只保留父节点信息;如果部分子节点被选中,则保留所有被选中的节点信息。
JavaScript 实现代码:
function flattenData(data) { const result = []; function traverse(node, parent) { if (node.checked === "1") { const item = { provinceCode: parent ? parent.provinceCode : node.code, cityCode: parent ? (parent.cityCode || (parent.level === 1 ? node.code : null)) : null, districtCode: parent ? (parent.level === 2 ? node.code : null) : null, level: parent ? parent.level + 1 : 1 }; result.push(item); } if (node.children) { node.children.forEach(child => traverse(child, item)); } } data.forEach(province => traverse(province)); return result; } // 示例用法 const data = [/* 原始数据 */]; const flattenedData = flattenData(data); console.log(flattenedData);
这段代码通过递归函数 traverse 遍历树形结构,根据 checked 属性和父节点信息构建扁平化数据。 它使用了更简洁的逻辑,避免了多个嵌套函数,并对代码进行了优化。 level 属性直接根据父节点的 level 推断,简化了逻辑。
以上就是如何将省市区树状结构数据扁平化处理?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论