Transfrom array (multiple depth object keys) into one object

Question

Task: Transform array of keys into one object and assign each key with an empty string e.g.("").

Problem: Keys are also representing different levels of depth in the result object (e.g. defaultToolConf.graph.graphApiConf.url represents 4 levels of depth in object). Each level of depth is separated by a dot(.) in a key string.

Input (array):

[
'ADMIN_URL_REGEXP', 
'BASE_PATH', 
'appName', 
'defaultToolConf',
'defaultToolConf.graph', 
'defaultToolConf.graph.graphApiConf', 
'defaultToolConf.graph.graphApiConf.markerCampaignsUrl',
'defaultToolConf.graph.graphApiConf.markerUrl', 
'defaultToolConf.graph.graphApiConf.ndviUrl', 
'defaultToolConf.graph.graphLineColors', 
'defaultToolConf.query', 
'defaultToolConf.query.canExportKml', 
'defaultToolConf.query.isExportEnabled', 
'defaultToolConf.query.isResizable', 
'defaultToolConf.test', 
'defaultToolConf.toolsPermissionsPath', 
'token', 
'token.format', 
'token.key', 
'token.paths'
]

Output (result object):

{
    "ADMIN_URL_REGEXP": "",
    "BASE_PATH": "",
    "appName": "",
    "defaultToolConf": {
        "graph": {
            "graphApiConf": {
                "markerCampaignsUrl": "",
                "markerUrl": "",
                "ndviUrl": ""
            },
            "graphLineColors": ""
        },
        "query": {
            "canExportKml": "",
            "isExportEnabled": "",
            "isResizable": ""
        },
        "test": "",
        "toolsPermissionsPath": ""
    },
    "tokenInterceptor": {
        "format": "",
        "key": "",
        "paths": ""
    }
}

What I have done so far: https://jsfiddle.net/rt279mfz/

I managed to create a result object with multiple depth objects.

Problems: I had to assign key values as empty object {}. That means I would have to loop through all object keys (in multiple depths) and reassign values as an empty string instead of an empty object. I don't know if that is possible.

I have repeating keys in the result object.

score 0 · Answer 1 · answered Oct 29 '21 at 00:18

You can "walk" through the object, creating sub-levels as you go. Here's an example:

const array = [
    'ADMIN_URL_REGEXP', 
    'BASE_PATH', 
    'appName', 
    'defaultToolConf',
    'defaultToolConf.graph', 
    'defaultToolConf.graph.graphApiConf', 
    'defaultToolConf.graph.graphApiConf.markerCampaignsUrl',
    'defaultToolConf.graph.graphApiConf.markerUrl', 
    'defaultToolConf.graph.graphApiConf.ndviUrl', 
    'defaultToolConf.graph.graphLineColors', 
    'defaultToolConf.query', 
    'defaultToolConf.query.canExportKml', 
    'defaultToolConf.query.isExportEnabled', 
    'defaultToolConf.query.isResizable', 
    'defaultToolConf.test', 
    'defaultToolConf.toolsPermissionsPath', 
    'token', 
    'token.format', 
    'token.key', 
    'token.paths'];
    
const arrayToObject = (arr) => {
  return arr.reduce((acc, el) => {
    let currentNode = acc;
    const pathParts = el.split(".");
    for (let i = 0; i < pathParts.length - 1; i++) { // skip the final element (- 1)
      let pp = pathParts[i];
      if (!currentNode[pp])
        currentNode[pp] = {}; // create the nested object if needed
      currentNode = currentNode[pp]; // move to the next level of the object
    }
    // currentNode is now the parent object of the last property from the array that we need to add, from here we just assign it to ""
    currentNode[pathParts[pathParts.length - 1]] = "";
    return acc;
  }, {});
}

let newObject = arrayToObject(array);
console.log(newObject);

munleashed · Accepted Answer · 2021-10-29T01:01:41.857

Iterative:

// Reduce 
const result = array.reduce((acc, item) => {

  // Split string to array
  const split = item.split('.');

  let currentStep = acc;

  split.forEach((item, index) => {
    // Set current object property (if already exists do nothing, if not then create an empty object, if its last index assign empty string)
    currentStep = currentStep[item]
                = (currentStep[item] || (index === split.length - 1 ? '' : {}))

  });

  return acc;

}, {})

Recursion:

const result = array.reduce((acc, item) => {

  const createDeepNestedObj = (obj, array, index = 0, current = array[index]) => {

    obj[current] = obj[current] || (index < array.length - 1 ? {} : '');

    if (index < array.length) createDeepNestedObj(obj[current], array, ++index);
  }

  createDeepNestedObj(acc, item.split('.'));

  return acc;

}, {})

Transfrom array (multiple depth object keys) into one object

2 Answers2