JavaScript 将树转换为嵌套数组答案

【问题标题】：JavaScript converting tree to a nested arrayJavaScript 将树转换为嵌套数组
【发布时间】：2020-11-05 19:46:46
【问题描述】：

我有一个使用 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)",
            "multiple": true
          }
        },
        "outputs": {},
        "class": "end-operator"
      },
      "top": null,
      "left": null
    },
    "37": {
      "properties": {
        "title": "CHROM",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 300,
      "top": 0
    },
    "38": {
      "properties": {
        "title": "CHROM",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 580,
      "top": 0
    },
    "39": {
      "properties": {
        "title": "REF",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 920,
      "top": 0
    },
    "40": {
      "properties": {
        "title": "REF",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 300,
      "top": 100
    },
    "41": {
      "properties": {
        "title": "REF",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 300,
      "top": 200
    },
    "42": {
      "properties": {
        "title": "REF",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 620,
      "top": 140
    },
    "43": {
      "properties": {
        "title": "POS",
        "inputs": {
          "ins": {
            "label": "Input (:i)",
            "multiple": true
          }
        },
        "outputs": {
          "output": {
            "label": "Output"
          }
        }
      },
      "left": 740,
      "top": 320
    }
  },
  "links": {
    "0": {
      "fromOperator": "0",
      "fromConnector": "outs",
      "fromSubConnector": 0,
      "toOperator": 37,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #e53935"
    },
    "1": {
      "fromOperator": "0",
      "fromConnector": "outs",
      "fromSubConnector": 1,
      "toOperator": 40,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #d81b60"
    },
    "2": {
      "fromOperator": "0",
      "fromConnector": "outs",
      "fromSubConnector": 2,
      "toOperator": 41,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #8e24aa"
    },
    "3": {
      "fromOperator": "0",
      "fromConnector": "outs",
      "fromSubConnector": 3,
      "toOperator": 43,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #5e35b1"
    },
    "4": {
      "fromOperator": 37,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": 38,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #3949ab"
    },
    "5": {
      "fromOperator": 40,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": 42,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #546e7a"
    },
    "6": {
      "fromOperator": 41,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": 42,
      "toConnector": "ins",
      "toSubConnector": 1,
      "color": " #039be5"
    },
    "7": {
      "fromOperator": 38,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": 39,
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #00acc1"
    },
    "8": {
      "fromOperator": 42,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": 39,
      "toConnector": "ins",
      "toSubConnector": 1,
      "color": " #00897b"
    },
    "9": {
      "fromOperator": 39,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": "1",
      "toConnector": "ins",
      "toSubConnector": 0,
      "color": " #43a047"
    },
    "10": {
      "fromOperator": 43,
      "fromConnector": "output",
      "fromSubConnector": 0,
      "toOperator": "1",
      "toConnector": "ins",
      "toSubConnector": 1,
      "color": " #7cb342"
    }
  },
  "operatorTypes": {}
}

我想用它来过滤tabulator中的数据所以把它变成这个：

[
  {
    "id": 1,
    "pid": null
  },
  {
    "id": 39,
    "pid": 1
  },
  {
    "id": 38,
    "pid": 39
  },
  {
    "id": 37,
    "pid": 38
  },
  {
    "id": 42,
    "pid": 39
  },
  {
    "id": 40,
    "pid": 42
  },
  {
    "id": 41,
    "pid": 42
  },
  {
    "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,
          "pid": 39,
          "children": [
            {
              "id": 40,
              "pid": 42
            },
            {
              "id": 41,
              "pid": 42
            }
          ]
        }
      ]
    },
    {
      "id": 43,
      "pid": 1
    }
  ]
}

但是我想进一步简化这只是 id 的嵌套数组。像这样：

问题是，如何从树转换为嵌套数组？

【问题讨论】：

你有什么数据，你得到了什么结果？
进一步简化 -- 我认为嵌套数组版本实际上比对象更复杂。使用混合类型的数组总是很丑陋，并且在这里很难确定（视觉或编程方式）每个节点的节点 ID 和子节点的位置。你展示的树在我看来几乎在所有方面都是最佳的。
我同意但是我正在尝试转换为制表符“复杂过滤器”格式tabulator.info/docs/4.8/filter
@NinaScholz 我将树作为数据，因此我试图到达最后的嵌套数组。
@ggorlen 是的，你是对的。我手动写的。感谢您指出。固定。

标签： javascript tree tabulator flowchart

【解决方案1】：

您可以使用递归来执行此操作；叶 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, "pid": 39, "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));

【讨论】：

非常感谢。很好地解决它。