Tukukkk

It is as easy as:

 root = root[label];

if you change your helper function to:

 const addLabelToMap = (root, label) => {

    if(!root[label]) root[label] =  {};

 }

I'd write it as:

 const buildMenuMap = menus => {

   const root = {};



   for(const menu of menus) {

     const keys = menu.split("/").slice(1);

     const prop = keys.pop();

     const obj = keys.reduce((curr, key) => curr[key] || (curr[key] = {}), root);

     obj[prop] = null;

  }



  return root;

}

Use reduce instead of map. The root will be the accumulator in this case:

const buildMenuMap = menu =>

  menu.reduce((root, item) => {

    let parts = item.slice(1).split("/");

    let lastPart = parts.pop();

    let leaf = parts.reduce((acc, part) => acc[part] || (acc[part] = {}), root);

    leaf[lastPart] = null;

    return root;

  }, Object.create(null));

Explanation:

For each item in the menu array, we extract the parts by first getting rid of the leading '/' (using slice(1)) and then splitting by '/'.

We then remove the lastPart from this resulting array (the last part is handled separetely from the rest).

For each remaining part in the parts array, we traverse the root array. At each level of traversing, we either return the object at that level acc[part] if it already exists, or we create and return a new one if it doesn't (acc[part] = {}).

After we get to the the last level leaf, we use the lastPart to set the value as null.

Notice that we pass Object.create(null) to reduce. Object.create(null) creates a prototypeless object so it will ba safer to use root[someKey] without having to check if someKey is an owned property or not.

Example:

const buildMenuMap = menu =>

  menu.reduce((root, item) => {

    let parts = item.slice(1).split("/");

    let lastPart = parts.pop();

    let leaf = parts.reduce((acc, part) => acc[part] || (acc[part] = {}), root);

    leaf[lastPart] = null;

    return root;

  }, Object.create(null));



let arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];



let result = buildMenuMap(arr);



console.log(result);

I just debugged your code to see what was wrong and I urge you to do the same. You make two (obvious) mistakes:

Firstly, In the very first iteration, here the value of map is just an empty object {}, the value of root gets initialised to "" and label is swipes.

.forEach((element) => {

  let root = map[element[0]] || "";

  ...

  root = root[label];

}

So then you get root[label] is undefined and so the new root is undefined.

Second, you are using map everywhere as it is.

const addLabelToMap = (root, label) => {

  if(!map[root]) map[root] = {};

  if(!map[root][label]) map[root][label] = {};

}

Instead you should be taking it as a parameter, for you to be able to do a recursion.

const addLabelToMap = (root, label) => {

  if(!root[label]) root[label] = {};

}

To debug you code, create a simple HTML file with the js in the script tags and then serve it from your local machine using python -m http.server. You can then add a debug point and go through your code step by step.

Try this as a holistic solution:

const menu = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];



const deepMerge = (target, source) => {

  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties

  for (let key of Object.keys(source)) {

    if (source[key] instanceof Object && key in target) Object.assign(source[key], deepMerge(target[key], source[key]))

  }



  // Join `target` and modified `source`

  Object.assign(target || {}, source)

  return target

};



const buildMenuMap = menu => {

  return menu

    .map(item => item.split('/').splice(1))



    // The `root` value is the object that we will be merging all directories into

    .reduce((root, directory) => {



      // Iterates backwards through each directory array, stacking the previous accumulated object into the current one

      const branch = directory.slice().reverse().reduce((acc, cur) => { const obj = {}; obj[cur] = acc; return obj;},null);



      // Uses the `deepMerge()` method to stitch together the accumulated `root` object with the newly constructed `branch` object.

      return deepMerge(root, branch);

    }, {});

};



buildMenuMap(menu);

Note: The deep merge solution was taken from @ahtcx on GitHubGist

You can simplify your code using Array.reduce, Object.keys & String.substring

buildMenuMap

The function takes the array as input and reduce it into an object where for each entry in array, the object is updated with corresponding hierarchy using addLabelToMap function. Each entry is converted into an array of levels (c.substring(1).split("/")).

addLabelToMap

The function takes 2 inputs

• 
  obj - the current root object / node


• 
  ar - array of child hierarchy

and returns the updated object

Logic

• function pops the first value (let key = ar.shift()) as key and add / update in the object (obj[key] = obj[key] || {};).


• If there is child hierarchy of current object (if(ar.length)), recursively call the function to update the object till the end (addLabelToMap(obj[key], ar)).


• Else (no further child hierarchy), check whether the object has some hierarchy (else if(!Object.keys(obj[key]).length)) because of other entries in array. If there is no hierarchy, i.e. it is a leaf, hence, set the value to null (obj[key] = null). Note, if there will never be case where there is an entry in array like /social/swipes/men/young along with existing, the else if block can be simplified to a simple else block.


• The object has been update, return the final updated object

let arr = ['/social/swipes/women', '/social/swipes/men', '/upgrade/premium'];



function addLabelToMap(obj, ar) {

  let key = ar.shift();

  obj[key] = obj[key] || {}; 

  if(ar.length) addLabelToMap(obj[key], ar);

  else if(!Object.keys(obj[key]).length) obj[key] = null;

  return obj;

}



function buildMenuMap(ar) {

  return ar.reduce((a,c) => addLabelToMap(a,c.substring(1).split("/")), {});

}



console.log(buildMenuMap(arr));