JavaScript将树转换为嵌套数组

如何解决JavaScript将树转换为嵌套数组

我使用jquery流程图库输入流程图，如下所示：

Flowchart

我得到这样的数据表示形式：

{
  "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));