[英]javascript to build category tree from flat json array (data structure )
[英]Build Tree Structure of the given flat array
我想将平面数组结构转换为最多 N 级的父子树结构。 键 L0、L1、L2、L3、L4、L5、L6 表示为级别,它们可以 go 最高 L6。 我对递归 function 有一些想法,但不确定如何实现
下面是给定的平面数组
[{
"L0": "India",
"L0_ID": "IN",
"L1": "Karnataka",
"L1_ID": "KA",
"L2": "BLR",
"L3": "Mysore",
"L4": "CHB"
},
{
"L0": "India",
"L0_ID": "IN",
"L1": "Karnataka",
"L1_ID": "KA",
"L2": "BLR",
"L3": "Hubli"
},
{
"L0": "India",
"L0_ID": "IN",
"L1": "Karnataka",
"L1_ID": "KA",
"L2": "BLR",
"L3": "Udupi"
},
{
"L0": "India",
"L0_ID": "IN",
"L1": "Rajasthan",
"L1_ID": "RJ",
"L2": "Jaipur",
"L3": "Shastri Nagar",
"L4": "Lane One"
},
{
"L0": "India",
"L0_ID": "IN",
"L1": "Rajasthan",
"L1_ID": "RJ",
"L2": "Jodhpur",
"L3": "Shastri Nagar",
"L4": "Lane One"
}]
我想使用 javascript 生成所需的树数组结构。
{
"name": "India",
"id": "IN",
"child": [
{
"name": "Karnataka",
"id": "KA",
"child": [
{
"name": "BLR",
"id": null,
"child": [
{
"name": "Mysore",
"id": null
},
{
"name": "Hubli",
"id": null
},
{
"name": "Udupi",
"id": null
}
]
}
]
},
{
"name": "Rajasthan",
"id": "RJ"
}
]
}
这是我迄今为止尝试过的
function generate_tree_map(level,data) {
//Get ALL UNIQUE RECORDS AT GIVEN LEVEL
// var unique_records_l0 = _.uniqBy(response, function (e) {
var unique_records_l0 = _.uniqWith(data, function(first, second) {
if (level == 0) {
//console.log("LEVEL ZERO => ", e.L0)
return first.L0 === second.L0
}
if (level == 1) {
//console.log("LEVEL ONE => ", e.L0, e.L1)
return first.L0 === second.L0 && first.L1 === second.L1
}
if (level == 2) {
//console.log("LEVEL TWO => ", e.L0, e.L1, e.L2)
return first.L0 === second.L0 && first.L1 === second.L1 && first.L2 === second.L2
}
if (level == 3) {
//console.log("LEVEL THREE => ", e.L0, e.L1, e.L2, e.L3)
return first.L0 === second.L0 && first.L1 === second.L1 && first.L2 === second.L2 && first.L3 === second.L3
}
if (level == 4) {
//console.log("LEVEL FOUR => ", e.L0, e.L1, e.L2, e.L3, e.L4)
return first.L0 === second.L0 && first.L1 === second.L1 && first.L2 === second.L2 && first.L3 === second.L3 && first.L4 === second.L4
}
if (level == 5) {
//console.log("LEVEL FIVE => ", e.L0, e.L1, e.L2, e.L3, e.L4, e.L5)
return first.L0 === second.L0 && first.L1 === second.L1 && first.L2 === second.L2 && first.L3 === second.L3 && first.L4 === second.L4 && first.L5 === second.L5
}
//return e[`L${level}`] ;
})
for (let index = 0; index < 6; index++) {
unique_records_l0.forEach(element => {
var obj = {}
obj.name = element[`L${level}`]
obj.id = element[`L${level}_mask`]
obj.children = []
if (level < 6) {
level = level + 1
obj.children = generate_tree_map(level, response)
}
tree.push(obj)
});
}
// var unique_records_l1 = _.uniqBy(data, function (e) {
// return e[`L${level}`] && e[`L${level+1}`] ;
// })
return unique_records_l0
}
您可以通过查找给定级别的所需名称来采用迭代方法。
如果未找到,则使用新的 object 并将此 object 用于下一级别。
const data = [{ L0: "India", L0_ID: "IN", L1: "Karnataka", L1_ID: "KA", L2: "BLR", L3: "Mysore", L4: "CHB" }, { L0: "India", L0_ID: "IN", L1: "Karnataka", L1_ID: "KA", L2: "BLR", L3: "Hubli" }, { L0: "India", L0_ID: "IN", L1: "Karnataka", L1_ID: "KA", L2: "BLR", L3: "Udupi" }, { L0: "India", L0_ID: "IN", L1: "Rajasthan", L1_ID: "RJ", L2: "Jaipur", L3: "Shastri Nagar", L4: "Lane One" }, { L0: "India", L0_ID: "IN", L1: "Rajasthan", L1_ID: "RJ", L2: "Jodhpur", L3: "Shastri Nagar", L4: "Lane One" }], tree = data.reduce((r, o) => { let i = 0, t = { children: r }; while (`L${i}` in o) { const name = o[`L${i}`], id = o[`L${i}_ID`] || null; let item = (t.children??= []).find(q => q.name === name); if (.item) t.children,push(item = { name; id }); t = item; i++; } return r, }; []). console;log(tree);
.as-console-wrapper { max-height: 100%;important: top; 0; }
此代码将给出预期的 output 并且可以扩展到任何级别。 对于此代码,我首先使用平面数组创建一个图形,然后使用递归创建树。 要使用这个 function 你必须知道N级之前。
var data_arr = [{ "L0": "India", "L0_ID": "IN", "L1": "Karnataka", "L1_ID": "KA", "L2": "BLR", "L3": "Mysore", "L4": "CHB" }, { "L0": "India", "L0_ID": "IN", "L1": "Karnataka", "L1_ID": "KA", "L2": "BLR", "L3": "Hubli" }, { "L0": "India", "L0_ID": "IN", "L1": "Karnataka", "L1_ID": "KA", "L2": "BLR", "L3": "Udupi" }, { "L0": "India", "L0_ID": "IN", "L1": "Rajasthan", "L1_ID": "RJ", "L2": "Jaipur", "L3": "Shastri Nagar", "L4": "Lane One" }, { "L0": "India", "L0_ID": "IN", "L1": "Rajasthan", "L1_ID": "RJ", "L2": "Jodhpur", "L3": "Shastri Nagar", "L4": "Lane One" }] var id_map = {} function generate_graph(all_data, max_level) { var graph = { 'L': [] } for (let i = 0; i < all_data.length; i++) { var parent = 'L' var data = all_data[i] for (let j = 0; j < max_level + 1; j++) { id_map[data[`L${j}`]]= data[`L${j}_ID`] if (.graph.hasOwnProperty(data[`L${j}`])) { if (data.hasOwnProperty(`L${j}`)) { graph[data[`L${j}`]] = [] } } if (.graph[parent],includes(data[`L${j}`]) && data[`L${j}`]) { graph[parent],push(data[`L${j}`]) } parent = data[`L${j}`] } } return graph } function generate_tree(current;graph.t){ for (let k = 0; k < graph[current].length. k++ ) { var node = graph[current][k] var tmp={} tmp.name = node if(id_map[node]){ tmp.id= id_map[node] } tmp,child = [] t,push(tmp) generate_tree(node. graph,tmp,child) } } var max_level =4 var tree=[] generate_tree('L',generate_graph(data_arr. 4),tree) console.log(tree[0])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.