How can I loop through a Javascript object array assigning objects as children of other objects within? Tree/hierarchical structure

Question

I need help looping through the following object array to reorganize everything into a hierarchy/tree. How do I achieve this? Any help is appreciated.

[  
   {  
      "id":1,
      "parentId":null,
      "value":"Root Parent 01",
      "children":[]
   },
   {  
      "id":8,
      "parentId":null,
      "value":"Root Parent 02",
      "children":[]
   },
   {  
      "id":36,
      "parentId":15,
      "value":"Child 01",
      "children":[]
   },
   {  
      "id":43,
      "parentId":15,
      "value":"Child 02",
      "children":[]

   },
   {  
      "id":50,
      "parentId":15,
      "value":"Child 03",
      "children":[]

   },
   {  
      "id":15,
      "parentId":null,
      "value":"Root Parent 03",
      "children":[]
   },
   {  
      "id":57,
      "parentId":22,
      "value":"Child 04",
      "children":[]

   },
   {  
      "id":64,
      "parentId":22,
      "value":"Child 05",
      "children":[]

   },
   {  
      "id":71,
      "parentId":22,
      "value":"Child 06",
      "children":[]

   },
   {  
      "id":78,
      "parentId":22,
      "value":"Child 07",
      "children":[]

   },
   {  
      "id":85,
      "parentId":22,
      "value":"Child 08",
      "children":[]

   },
   {  
      "id":92,
      "parentId":22,
      "value":"Child 09",
      "children":[]
   },
   {  
      "id":99,
      "parentId":22,
      "value":"Child 10",
      "children":[]

   },
   {  
      "id":106,
      "parentId":22,
      "value":"Child 11",
      "children":[]

   },
   {  
      "id":22,
      "parentId":null,
      "value":"Root Parent 04",
      "children":[]
   },
   {  
      "id":113,
      "parentId":29,
      "value":"Child 12",
      "children":[]

   },
   {  
      "id":115,
      "parentId":29,
      "value":"Child 13",
      "children":[]

   },
   {  
      "id":122,
      "parentId":29,
      "value":"Child 14",
      "children":[]

   },
   {  
      "id":129,
      "parentId":29,
      "value":"Child 15",
      "children":[]

   },
   {  
      "id":136,
      "parentId":29,
      "value":"Child 16",
      "children":[]

   },
   {  
      "id":143,
      "parentId":29,
      "value":"Child 17",
      "children":[]

   },
   {  
      "id":157,
      "parentId":150,
      "value":"Child 18",
      "children":[]

   },
   {  
      "id":150,
      "parentId":29,
      "value":"Child 19",
      "children":[]

   },
   {  
      "id":29,
      "parentId":null,
      "value":"Root Parent 05",
      "children":[]
   }
]

Desired object array:

[
    {  
        "id":1,
        "parentId":null,
        "value":"Root Parent 01",
        "children":[]
    },
    {  
        "id":8,
        "parentId":null,
        "value":"Root Parent 02",
        "children":[]
    },
    {  
        "id":15,
        "parentId":null,
        "value":"Root Parent 03",
        "children":[
            {  
                "id":36,
                "parentId":15,
                "value":"Child 01",
                "children":[]
            },
            {
                "id":43,
                "parentId":15,
                "value":"Child 02",
                "children":[]
            },
            {
                "id":50,
                "parentId":15,
                "value":"Child 03",
                "children":[]
            }
        ]
    },
    {  
        "id":22,
        "parentId":null,
        "value":"Root Parent 04",
        "children":[
            {
                "id":57,
                "parentId":22,
                "value":"Child 04",
                "children":[]
            },
            {
                "id":64,
                "parentId":22,
                "value":"Child 05",
                "children":[]
            },
            {
                "id":71,
                "parentId":22,
                "value":"Child 06",
                "children":[]
            },
            {
                "id":78,
                "parentId":22,
                "value":"Child 07",
                "children":[]
            },
            {
                "id":85,
                "parentId":22,
                "value":"Child 08",
                "children":[]
            },
            {
                "id":92,
                "parentId":22,
                "value":"Child 09",
                "children":[]
            },
            {
                "id":99,
                "parentId":22,
                "value":"Child 10",
                "children":[]
            },
            {
                "id":106,
                "parentId":22,
                "value":"Child 11",
                "children":[]
            }
        ]
    },
    {  
        "id":29,
        "parentId":null,
        "value":"Root Parent 05",
        "children":[
            {
                "id":113,
                "parentId":29,
                "value":"Child 12",
                "children":[]
            },
            {
                "id":115,
                "parentId":29,
                "value":"Child 13",
                "children":[]
            },
            {
                "id":122,
                "parentId":29,
                "value":"Child 14",
                "children":[]
            },
            {
                "id":129,
                "parentId":29,
                "value":"Child 15",
                "children":[]
            },
            {
                "id":136,
                "parentId":29,
                "value":"Child 16",
                "children":[]
            },
            {
                "id":143,
                "parentId":29,
                "value":"Child 17",
                "children":[]
            },
            {
                "id":150,
                "parentId":29,
                "value":"Child 19",
                "children":[
                    {
                        "id":157,
                        "parentId":150,
                        "value":"Child 18",
                        "children":[]
                    }
                ]
            }
        ]
    }
]

Desired Tree:

Root Parent 01
Root Parent 02
Root Parent 03
---Child 01
---Child 02
---Child 03
Root Parent 04
---Child 04
---Child 05
---Child 06
---Child 07
---Child 08
---Child 09
---Child 10
---Child 11
Root Parent 05
---Child 12
---Child 13
---Child 14
---Child 15
---Child 16
---Child 17
---Child 19
------Child 18

@Andrew This post is long enough. I'm just looking for some advice not criticism. — Cody Tolene
– Cody Tolene, Commented Feb 22, 2018 at 22:19
A viable solution/example can be found here: stackoverflow.com/a/22072374/5191055 — Cody Tolene
– Cody Tolene, Commented Feb 22, 2018 at 22:21
Not criticism. Check every single question on SO that has a solution request with no code. It's part of this website's policy. Everybody here is more than happy to give you a solution, but we'd like some level of attempt. Even if it sucks. — Andrew
– Andrew, Commented Feb 22, 2018 at 22:42
@Andrew You don't get what I'm saying. I have this written in C#. I have this written out in Javascript as well, though not working yet. My point is, this post is already too long. — Cody Tolene
– Cody Tolene, Commented Feb 22, 2018 at 22:48

John Pavek · Accepted Answer · 2018-02-22 22:25:16Z

While I am a huge fan of trying to attempt this yourself. I have always wondered how to do this as well, and figured it would be a good opportunity for me too.

First I sort the input list looking for items that are for sure a child element and not at all a parent.

Then in the second loop we look for the parent that the child belongs to, and we match them up. You will probably have to refine this process depending on your data. You might also need to loop multiple times, but this should give you enough to make a dent.

var inputArray = [{
    "id": 1,
    "parentId": null,
    "value": "Root Parent 01",
    "children": []
  },
  {
    "id": 8,
    "parentId": null,
    "value": "Root Parent 02",
    "children": []
  },
  {
    "id": 36,
    "parentId": 15,
    "value": "Child 01",
    "children": []
  },
  {
    "id": 43,
    "parentId": 15,
    "value": "Child 02",
    "children": []

  },
  {
    "id": 50,
    "parentId": 15,
    "value": "Child 03",
    "children": []

  },
  {
    "id": 15,
    "parentId": null,
    "value": "Root Parent 03",
    "children": []
  },
  {
    "id": 57,
    "parentId": 22,
    "value": "Child 04",
    "children": []

  },
  {
    "id": 64,
    "parentId": 22,
    "value": "Child 05",
    "children": []

  },
  {
    "id": 71,
    "parentId": 22,
    "value": "Child 06",
    "children": []

  },
  {
    "id": 78,
    "parentId": 22,
    "value": "Child 07",
    "children": []

  },
  {
    "id": 85,
    "parentId": 22,
    "value": "Child 08",
    "children": []

  },
  {
    "id": 92,
    "parentId": 22,
    "value": "Child 09",
    "children": []
  },
  {
    "id": 99,
    "parentId": 22,
    "value": "Child 10",
    "children": []

  },
  {
    "id": 106,
    "parentId": 22,
    "value": "Child 11",
    "children": []

  },
  {
    "id": 22,
    "parentId": null,
    "value": "Root Parent 04",
    "children": []
  },
  {
    "id": 113,
    "parentId": 29,
    "value": "Child 12",
    "children": []

  },
  {
    "id": 115,
    "parentId": 29,
    "value": "Child 13",
    "children": []

  },
  {
    "id": 122,
    "parentId": 29,
    "value": "Child 14",
    "children": []

  },
  {
    "id": 129,
    "parentId": 29,
    "value": "Child 15",
    "children": []

  },
  {
    "id": 136,
    "parentId": 29,
    "value": "Child 16",
    "children": []

  },
  {
    "id": 143,
    "parentId": 29,
    "value": "Child 17",
    "children": []

  },
  {
    "id": 157,
    "parentId": 150,
    "value": "Child 18",
    "children": []

  },
  {
    "id": 150,
    "parentId": 29,
    "value": "Child 19",
    "children": []

  },
  {
    "id": 29,
    "parentId": null,
    "value": "Root Parent 05",
    "children": []
  }
]

function DataRollUp(input) {
  var hasParent = [];
  var output = []
  for (i of input) {
    if (i.parentId) {
      hasParent.push(i);
    } else {
      output.push(i);
    }
  }

  for (i of hasParent) {
    var parent = output.find(record => record.id == i.parentId)

    if (parent) {
      parent.children.push(i);
    }
  }


  console.log(output);
  return output;

}

DataRollUp(inputArray)

Collectives™ on Stack Overflow

How can I loop through a Javascript object array assigning objects as children of other objects within? Tree/hierarchical structure

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related