What is the best way to generate a nested object arrangement using a path (series of keys)?

Question

What is the best way to generate a nested object arrangement using a path (series of keys)?

I have a challenge of creating nested objects from arrays of strings to store the sequence of input strings. Originally, I was only generating chains with a depth of 2, but now I need to expand this capability to create higher-depth chains.

Essentially, I am looking to transform an array like this:

["test1", "test2", "test3", "test4"]

into the following format:

{
    "test1":
    {
        "test2":
        {
            "test3":
            {
                "test4": {}
            }
        }
    }
}

javascript arrays string object javascript-objects

Answer 1

Answer №1

If you're looking to create an object from a given path, then you might want to consider using Array#reduce:

function generateObjectFromPath (path) {
  var result = {}
  
  path.reduce(function (obj, key) {
    return (obj[key] = {})
  }, result)
  
  return result
}

var samplePath = ["example1", "example2", "example3", "example4"]

console.log(generateObjectFromPath(samplePath))

.as-console-wrapper { min-height: 100%; }

Answer 2

If you're looking to create an object from a given path, then you might want to consider using Array#reduce:

function generateObjectFromPath (path) {
  var result = {}
  
  path.reduce(function (obj, key) {
    return (obj[key] = {})
  }, result)
  
  return result
}

var samplePath = ["example1", "example2", "example3", "example4"]

console.log(generateObjectFromPath(samplePath))

.as-console-wrapper { min-height: 100%; }

Answer 3

Answer №2

I had a problem similar to this that I wanted to tackle by setting a value at the end of the path in the resulting object. To achieve this, I took inspiration from gyre's original function and added some extra tweaks to cater to my specific needs.

// Transform an array representing a key path into a nested object
//
// Optional arguments:
//     - value to set at the end of the path
//     - initial object
// 
// Example: let house = createObjectFromPath(['kitchen', 'fridge'], 'empty', {civic: 123})
//     => house = {civic: 123, kitchen: {fridge: 'empty'}}
const createObjectFromPath = (path, value = {}, obj = {}) =>
{
    path.reduce((result, key, i, source) =>
        {
            if(i === (source.length - 1))
            {
                return (result[key] = value)
            }
            else
            {
                return (result[key] = {})
            }
        },
        obj
    )
    
    return obj;
}


// Demonstration: house = {civic: 123, kitchen: {fridge: 'empty'}}
console.log(
  createObjectFromPath(
    ['kitchen', 'fridge'],
    'empty',
    {civic: 123}
  )
)

Answer 4

I had a problem similar to this that I wanted to tackle by setting a value at the end of the path in the resulting object. To achieve this, I took inspiration from gyre's original function and added some extra tweaks to cater to my specific needs.

// Transform an array representing a key path into a nested object
//
// Optional arguments:
//     - value to set at the end of the path
//     - initial object
// 
// Example: let house = createObjectFromPath(['kitchen', 'fridge'], 'empty', {civic: 123})
//     => house = {civic: 123, kitchen: {fridge: 'empty'}}
const createObjectFromPath = (path, value = {}, obj = {}) =>
{
    path.reduce((result, key, i, source) =>
        {
            if(i === (source.length - 1))
            {
                return (result[key] = value)
            }
            else
            {
                return (result[key] = {})
            }
        },
        obj
    )
    
    return obj;
}


// Demonstration: house = {civic: 123, kitchen: {fridge: 'empty'}}
console.log(
  createObjectFromPath(
    ['kitchen', 'fridge'],
    'empty',
    {civic: 123}
  )
)

What is the best way to generate a nested object arrangement using a path (series of keys)?

Answer №1

Answer №2

Similar questions

After refreshing the page, the console log within the React useEffect function ceases to function

What is causing this form to submit?

How can an Angular Component be created in the browser using the standard method?

Unable to display response following the submission of a POST request

How can I implement custom code to run in all Ajax requests in Ext JS without having to manually insert it into each individual request?

Updating the state using ui-router

WordPress header causing issues with Document.write()

Is it possible to invoke a JavaScript function within PHP code?

Add items to a new array with a property set to true, if they are present in the original array

Is it possible to use AngularJS promises without callbacks?

Add the URL link according to the specific domain name

What is the best way to implement a constant countdown timer in JQuery that remains unaffected by page refreshes?

Enhancing the functionality of an existing framework through the integration of a

Having trouble with Discord.js version 12 and the messageReactionAdd event not triggering properly?

Error: [BITFIELD_INVALID_RANGE]: The bitfield flag or number entered is not valid: 3214336

Creating visual content on a website

What method can I use to identify the most widely-used edition of a specific npm module?

What is the best way to retrieve the state value in react once it has been changed?

The Strapi admin panel seems to be stuck on an eternal loading loop when accessed locally on my localhost

Unleash the power of arrays within arrays in PySpark to enhance your column explosion