How to convert these two data formats into each other through JS?
The same content, the flat ones are combined into nested ones, and the nested ones are disassembled into flat formats
I couldn’t figure it out after a long time, please help!
[
{
"id":1,
"number":"100.000",
"name": "admin.",
"level":1,
"children": [
{
"id": 2,
"number": "100.210",
"name": "admin.marketing",
"level": 2
},
{
"id": 3,
"number": "100.260",
"name": "admin.operation",
"level": 2,
"children": [
{
"id": 5,
"number": "260.261",
"name": "operation.content",
"level": 3
},
{
"id": 6,
"number": "260.262",
"name": "operation.promote",
"level": 2
},
{
"id": 7,
"number": "260.263",
"name": "operation.service",
"level": 2
}
]
},
{
"id": 4,
"number": "100.280",
"name": "admin.development",
"level": 2
}
]
}
]
[
{
"id":1,
"number":"100.000",
"name": "admin.",
"level":1
},
{
"id": 2,
"number": "100.210",
"name": "admin.marketing",
"level": 2
},
{
"id": 3,
"number": "100.260",
"name": "admin.operation",
"level": 2
},
{
"id": 4,
"number": "100.280",
"name": "admin.development",
"level": 2
},
{
"id": 5,
"number": "260.261",
"name": "operation.content",
"level": 3
},
{
"id": 6,
"number": "260.262",
"name": "operation.promote",
"level": 3
},
{
"id": 7,
"number": "260.263",
"name": "operation.service",
"level": 3
}
]
// 待處理數(shù)值
var data = [
{
"id":1,
"number":"100.000",
"name": "admin.",
"level":1,
"children": [
{
"id": 2,
"number": "100.210",
"name": "admin.marketing",
"level": 2
},
{
"id": 3,
"number": "100.260",
"name": "admin.operation",
"level": 2,
"children": [
{
"id": 5,
"number": "260.261",
"name": "operation.content",
"level": 3
},
{
"id": 6,
"number": "260.262",
"name": "operation.promote",
"level": 2
},
{
"id": 7,
"number": "260.263",
"name": "operation.service",
"level": 2
}
]
},
{
"id": 4,
"number": "100.280",
"name": "admin.development",
"level": 2
}
]
}
]
// 遞歸函數(shù)
function headFor(o, cb){
if (!o) return;
o.forEach(child => {
cb(child);
if (child.children) {
headFor(child.children, cb);
}
});
}
// 遍歷 data 的結(jié)果保存在 res
var res = [];
// 調(diào)用 遞歸函數(shù)headFor (注意 第二個(gè)參數(shù)是函數(shù))
headFor(data, item => {
var temp = {};
temp.id = item.id
temp.number = item.number;
temp.name = item.name;
temp.level = item.level;
res.push(temp);
});
// 告訴數(shù)組怎么判斷兩個(gè)元素 然后讓他數(shù)組自己去干
res.sort((a, b) => {
return a.id > b.id;
});
// 打印
res.forEach(e => console.log(e));
console.log(JSON.stringify(res));
The outermost data is an array. In fact, it can be considered as the outer children attribute, and the child elements of data may themselves have children.
Now the reverse method has been completed with the help of group friend owl!
var data=[
{
"id":1,
"number":"100.000",
"name": "admin.",
"level":1
},
{
"id": 2,
"number": "100.210",
"name": "admin.marketing",
"level": 2
},
{
"id": 3,
"number": "100.260",
"name": "admin.operation",
"level": 2
},
{
"id": 4,
"number": "100.280",
"name": "admin.development",
"level": 2
},
{
"id": 5,
"number": "260.261",
"name": "operation.content",
"level": 3
},
{
"id": 6,
"number": "260.262",
"name": "operation.promote",
"level": 3
},
{
"id": 7,
"number": "260.263",
"name": "operation.service",
"level": 3
}
];
var res = [];
var dicKey = {};
data.forEach((m,i) => {
var mStr = String(m.name).substr(0,String(m.name).indexOf(".")+1);
var isParent = String(m.name).charAt(m.name.length -1) == ".";
if(dicKey[mStr] == undefined)
{
dicKey[mStr] = [];
if(!isParent) dicKey[mStr].push(i);
}else{
dicKey[mStr].push(i);
}
});
function getTreeJson(obj){
var key = String(obj.name).charAt(obj.name.length -1) == "." ? obj.name:String(obj.name).substr(String(obj.name).indexOf(".")+1) + ".";
if(dicKey[key])
{
dicKey[key].forEach(c =>{
if(!obj.children) obj.children = [];
obj.children.push(data[c]);
getTreeJson(data[c]);
});
}
}
data.forEach(m => {
if(String(m.name).charAt(m.name.length -1) == ".")
{
res.push(m);
getTreeJson(m);
}
});
// 打印
console.log(JSON.stringify(dicKey));
console.log(JSON.stringify(res));
var data = [
{
"id":1,
"number":"100.000",
"name": "admin.",
"level":1,
"children": [
{
"id": 2,
"number": "100.210",
"name": "admin.marketing",
"level": 2
},
{
"id": 3,
"number": "100.260",
"name": "admin.operation",
"level": 2,
"children": [
{
"id": 5,
"number": "260.261",
"name": "operation.content",
"level": 3
},
{
"id": 6,
"number": "260.262",
"name": "operation.promote",
"level": 2
},
{
"id": 7,
"number": "260.263",
"name": "operation.service",
"level": 2
}
]
},
{
"id": 4,
"number": "100.280",
"name": "admin.development",
"level": 2
}
]
}
]
var arr = [];
function selirizeData(data){
data.forEach(function(element) {
var item = {};
for(val in element){
if(val !== 'children'){
item[val] = element[val];
}else{
selirizeData(element['children']);
}
}
arr.push(item);
}, this);
};
selirizeData(data);