问题描述
我使用jquery流程图库输入流程图,如下所示:
我得到这样的数据表示形式:
{
"operators": {
"0": {
"properties": {
"title": "Start","inputs": {},"outputs": {
"outs": {
"label": "Output (:i)","multiple": true
}
},"class": "start-operator"
},"top": 0,"left": 0
},"1": {
"properties": {
"title": "End","inputs": {
"ins": {
"label": "Input (:i)","outputs": {},"class": "end-operator"
},"top": null,"left": null
},"37": {
"properties": {
"title": "CHROM","outputs": {
"output": {
"label": "Output"
}
}
},"left": 300,"top": 0
},"38": {
"properties": {
"title": "CHROM","left": 580,"39": {
"properties": {
"title": "REF","left": 920,"40": {
"properties": {
"title": "REF","top": 100
},"41": {
"properties": {
"title": "REF","top": 200
},"42": {
"properties": {
"title": "REF","left": 620,"top": 140
},"43": {
"properties": {
"title": "POS","left": 740,"top": 320
}
},"links": {
"0": {
"fromOperator": "0","fromConnector": "outs","fromSubConnector": 0,"toOperator": 37,"toConnector": "ins","toSubConnector": 0,"color": " #e53935"
},"1": {
"fromOperator": "0","fromSubConnector": 1,"toOperator": 40,"color": " #d81b60"
},"2": {
"fromOperator": "0","fromSubConnector": 2,"toOperator": 41,"color": " #8e24aa"
},"3": {
"fromOperator": "0","fromSubConnector": 3,"toOperator": 43,"color": " #5e35b1"
},"4": {
"fromOperator": 37,"fromConnector": "output","toOperator": 38,"color": " #3949ab"
},"5": {
"fromOperator": 40,"toOperator": 42,"color": " #546e7a"
},"6": {
"fromOperator": 41,"toSubConnector": 1,"color": " #039be5"
},"7": {
"fromOperator": 38,"toOperator": 39,"color": " #00acc1"
},"8": {
"fromOperator": 42,"color": " #00897b"
},"9": {
"fromOperator": 39,"toOperator": "1","color": " #43a047"
},"10": {
"fromOperator": 43,"color": " #7cb342"
}
},"operatorTypes": {}
}
我想用它来过滤tabulator中的数据,所以把它变成这个:
[
{
"id": 1,"pid": null
},{
"id": 39,"pid": 1
},{
"id": 38,"pid": 39
},{
"id": 37,"pid": 38
},{
"id": 42,{
"id": 40,"pid": 42
},{
"id": 41,{
"id": 43,"pid": 1
}
]
然后使用此行将其变成一棵树:
const idMapping = data.reduce((acc,el,i) => {
acc[el.id] = i;
return acc;
},{});
let root;
data.forEach(el => {
// Handle the root element
if (el.pid === null) {
root = el;
return;
}
// Use our mapping to locate the parent element in our data array
const parentEl = data[idMapping[el.pid]];
// Add our current el to its parent's `children` array
parentEl.children = [...(parentEl.children || []),el];
});
这就像一棵树:
{
"id": 1,"pid": null,"children": [
{
"id": 39,"pid": 1,"children": [
{
"id": 38,"pid": 39,"children": [
{
"id": 37,"pid": 38
}
]
},{
"id": 42,"children": [
{
"id": 40,"pid": 42
},{
"id": 41,"pid": 42
}
]
}
]
},{
"id": 43,"pid": 1
}
]
}
但是,我想进一步简化为仅嵌套id的数组。像这样:
[
1,[
[
39,[
[
38,[
37
],],[
42,[
40,41
]
]
]
],43
]
]
问题是,如何从树转换为嵌套数组?
解决方法
您可以使用递归来做到这一点;叶子ID向上传递而没有数组包装器,而内部节点ID被包裹在带有第二个元素的数组中。
const tree = { "id": 1,"pid": null,"children": [ { "id": 39,"pid": 1,"children": [ { "id": 38,"pid": 39,"children": [ { "id": 37,"pid": 38 } ] },{ "id": 42,"children": [ { "id": 40,"pid": 42 },{ "id": 41,"pid": 42 } ] } ] },{ "id": 43,"pid": 1 } ] };
const objTreeToArrTree = node =>
node.children
? [node.id].concat([node.children.map(objTreeToArrTree)])
: node.id
;
console.log(JSON.stringify(objTreeToArrTree(tree),null,2));