本文介绍如何将省市区三级嵌套数据扁平化,并根据选中状态调整层级信息。原始数据为树状结构,包含省、市、区三级信息(代码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" } ] } ] } ]
目标数据结构: 根据选中状态,如果所有子级都选中,则只保留父级;如果部分子级选中,则保留所有选中级别的信息。
[ { "provinceAreald": "110000", "cityAreald": null, "countryAreald": null, "actualAreaLevel": "1" }, { "provinceAreald": "120000", "cityAreald": "120100", "countryAreald": "120102", "actualAreaLevel": "3" } ]
JavaScript实现: 以下代码通过递归函数实现数据转换:
function flattenData(data) { const result = []; function processNode(node, parent) { if (node.checked === "1") { const item = { provinceAreald: parent ? parent.code : node.code, cityAreald: null, countryAreald: null, actualAreaLevel: 1, }; if (node.children) { const childrenChecked = node.children.filter(child => child.checked === "1"); if (childrenChecked.length > 0) { item.actualAreaLevel = 1; childrenChecked.forEach(child => { item.cityAreald = child.code; item.actualAreaLevel = 2; if(child.children){ const grandChildrenChecked = child.children.filter(grandchild => grandchild.checked === "1"); if(grandChildrenChecked.length > 0){ grandChildrenChecked.forEach(grandchild => { item.countryAreald = grandchild.code; item.actualAreaLevel = 3; }) } } }) } } result.push(item); } if (node.children) { node.children.forEach(child => processNode(child, node)); } } data.forEach(province => processNode(province)); return result; } const newData = flattenData(data); console.log(newData);
这段代码更简洁高效地实现了相同的功能,避免了原代码中不必要的函数嵌套和变量传递。 它直接在递归函数内部处理所有层级,并根据选中状态动态更新actualAreaLevel以及cityAreald和countryAreald的值。