How to get parent path all the way to the last child in javascript

Question

I am having a difficult time trying to get the path from the parent down to the child.

The below "fullPath" is what i am trying to achieve. Get the parent path followed by the children path.

[{
    "name": "menu1",
    "path": "/path1",
    "id": 1,
    "parentId": 0,
    "item": [{
        "name": "subMenu1",
        "path": "/itemPath1",
        "parentId": 1,
        "id": 3,
        "fullpath": "/path1/itemPath1"
    }, {
        "name": "subMenu2",
        "path": "/itemPath2",
        "parentId": 1,
        "id": 4,
        "fullpath": "/path1/itemPath2"
    }]

}, {
    "name": "menu2",
    "path": "/path2",
    "id": 2,
    "parentId": 0,
    "item": [{
        "name": "subMenu2",
        "path": "/itemPath2",
        "parentId": 2,
        "id": 5,
        "fullpath": "/path2/itemPath2"
    }]

}]

The javascript function used to create the above json.

var getList = function(list) {
                var result = {items: []},length = list.length;

                var tmpStore = {}
                var i, item, id, pId;

                for (i = 0; i < length; ++i) {
                    item = list[i];
                    id = item.id;
                    tmpStore[id] = item;
                    pId = parseInt(item.parentId, 10);

                    if (pId === 0) {
                        result.items.push(item);
                    } else {

                        if (typeof tmpStore[pId].items === 'undefined') {
                            tmpStore[pId].items = [];
                        }
                        tmpStore[pId].items.push(item);
                    }


                }

                return result;
            };

            var output = getList(list1);
            var sideDetailsInfo = output.items;
            console.log(sideDetailsInfo)

//The above function created by fuyushimoya.

var list1 variable contains the below.

var list1 = [{
        "name": "menu1",
        "id": 1,
        "parentid": 0,
        "path": "/path1"
    }, {
        "name": "menu2",
        "id": 2,
        "parentid": 0,
        "path": "/path2"
    }, {
        "name": "subMenu1",
        "id": 3,
        "parentid": 1,
        "path": "/itemPath1"
    }, {
        "name": "subMenu2",
        "id": 4,
        "parentid": 1,
        "path": "/itemPath2"
    }, {
        "name": "subMenu2",
        "id": 5,
        "parentid": 2,
        "path": "/itemPath2"
    }]

Your help is appreciated and any advice would be great.

Answer 1

Starting at the root level, you want to iterate through each level of parents and find the children that belong to each parent. Then simply combine the parent path string with the child and overwrite it to the child. We can just edit the filtered level array because it still references the objects in the original array. I used recursion in the following code:

// find all root level elements with parentid of 0
var rootArray = origArray.filter(function(elem) {
   return elem.parentid === 0;
});
doPaths(rootArray); // initial call recursive function

function doPaths(levelArray) {
  levelArray.forEach(function(pelem) { // get current level elements
    var childArray = origArray.filter(function(celem) { // get child elements
      return celem.parentid === pelem.id;
    });
    if (childArray.length > 0) { // child elements were found
      childArray.forEach(function(celem) { // change the path of the child elements
        celem.path = pelem.path + celem.path;
      });
      doPath(childArray); // recursive call to get children of children etc...
    }
  });
}

Result:

[{ ​​
  id: 1
  name: "menu1"​
  parentid: 0
  path: "/path1"
}, {
  id: 2
  name: "menu2"    ​​
  parentid: 0    ​​
  path: "/path2"    ​​    ​
}, {  ​​
  id: 3    ​​
  name: "subMenu1"    ​​
  parentid: 1    ​​
  path: "/path1/itemPath1"    ​​  ​
}, { ​​
  id: 4 ​​
  name: "subMenu2"    ​​
  parentid: 1
  path: "/path1/itemPath2"
}, {
  id: 5   ​​
  name: "subMenu3"
  parentid: 2
  path: "/path2/itemPath3"
}, { ​​
  id: 6    ​​
  name: "subSubMenu1"   ​​
  parentid: 5    ​​
  path: "/path2/itemPath3/subitemPath1"    ​​
​}, {  ​​
  id: 7  ​​
  name: "subSubSubMenu1" ​​
  parentid: 6
  path: "/path2/itemPath3/subitemPath1/subsubitemPath2"
}]