从具有父子引用的数组创建树结构

Question

我正在尝试将片段中的 json 更改为树结构，就像 https://www.primefaces.org/primeng/#/treetable 中一样（下面也是我期望的示例）。我知道它涉及递归，但我不确定如何深入 link 每个。

我期望的输出如下所示。父级为真的 json 成为根。如果根有值，则将值的 id 对应的 json 推送到具有 json 对象 "data" 的子数组。同样，如果 json 有值，则 json 对应于值的 id 被推送到带有 json 对象“数据”的子数组等等。

我写的代码只是一个初始阶段。需要有关如何通过迭代完成嵌套的帮助。

[
  {
    "data": {
      "parent": true,
      "id": "C001",
      "type": "Folder",
      "values": [
        {
          "id": "P001",
          "type": "File"
        }
      ]
    },
    "children": [
      {
        "data": {
          "parent": false,
          "id": "P001",
          "type": "File",
          "values": [
            {
              "id": "P002",
              "type": "Image"
            }
          ]
        },
        "children": [
          {
            "data": {
              "parent": false,
              "id": "P002",
              "type": "Image",
              "values": [

              ]
            }
          }
        ]
      }
    ]
  },
  {
    "data": {
      "parent": true,
      "id": "S000",
      "type": "Something",
      "values": [

      ]
    }
  }
]

 var junkdata=[
      {
        "parent": false,
        "id": "P001",  
         "type":"File",
        "values": [
            {
                "id": "P002",
                "type": "Image"
              }
        ]
      },
      {
        "parent": true,
        "id": "C001",
        "type": "Folder",
        "values": [
          {
            "id": "P001",
            "type": "File"
          }]
      },
      {
        "parent": false,
        "id": "P002",
        "type": "Image",
        "values":[]
      },
      {
        "parent": true,
        "id": "S000",
        "type": "Something",
        "values":[]
      }];
    
    var parentDatas=junkdata.filter((x)=>x.parent==true);
    if(parentDatas.length>0){
     var finalResponse=parentDatas.map((parentData)=>{
        var resultJson={};
        resultJson.data=parentData;
        if(parentData.values.length>0){
            resultJson.children=[];
            for(var i of parentData.values){
                var child=junkdata.find((x)=>x.id==i.id);
                if(child){
                   var jsonObj={};
                    jsonObj.data=child;
                    resultJson.children.push(jsonObj);
                }
    
            }
        }
        return resultJson;
    
    })
    }
    console.log(JSON.stringify(finalResponse));

Answer 1

基本上，我们可以从这个开始处理根节点：

let tree = yourData.filter(x => x.parent).map(process);

其中process是处理给定节点的递归函数：

let process = node => ({
    id: node.id,
    type: node.type,
    children: node.values.map(x => process(
        yourData.find(y => y.id === x.id)))
});

对于 node.values 中的每个 id，它都会找到一个具有该 id 的节点，并在其上递归调用 process。处理完所有子节点后，process 将它们收集到一个数组中，并 returns 新格式化的对象。

这是处理类图结构的一般递归模式，其中您 "nodes" 以某种方式连接到其他 "nodes":

function F (N: node) {

    for each node M which is connected to N {
        F (M) <--- recursion
    }

    result = do something with N

    return result
}

从具有父子引用的数组创建树结构

Create a tree structure from an array with parent-child references

javascript

json

treetable