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

Question

I am trying to alter the json in snippet to a tree structure just like in https://www.primefaces.org/primeng/#/treetable (below is the sample i expect too). I understand it involves recursion but I ain't sure how to deeply link each.

The output i expect is something like below. The json whose parent is true becomes the root. If the root has values, the json corresponding to id of the value is pushed to children array with a json object "data". Again if that json has values, the json correspond to the id of value is pushed to children array with a json object "data and so on.

The code i have written is just a initial phase. Need help on how nesting can be done through iteration.

[
  {
    "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

Basically, we can start with this to process the root nodes:

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

where process is the recursive function that processes a given node:

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

For each id in node.values , it locates a node with that id and recursively calls process on it. Once all child nodes are dealt with, process collects them into an array and returns the newly formatted object.

This is the general recursion pattern for working with graph-alike structures, where you have "nodes" somehow connected to other "nodes":

function F (N: node) {

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

    result = do something with N

    return result
}