Update a nested object key by concatenating key names with "." to create a string

Question

Update a nested object key by concatenating key names with "." to create a string

Imagine having this specific object structure:

var obj = {
  level1 :{
    level2: {
      level3: {
        title: "champion"
      }
    }
  }
}

Now the goal is to update the title key using a provided string (note that it's a string, not an actual variable) like so:

let myString = "level1.level2.level3.title"; // please note that the value of myString is fetched dynamically

One possible method could be:

obj[myString] = "ultimate-champion";

Sadly, the above approach doesn't produce the desired outcome.

Furthermore - there are instances where an undefined object needs to be addressed by defining it with a new empty object.

For instance, If starting off with the following object:

var obj = {
  level1 : {}
  }
}

The objective remains the same: altering the obj in order to reach level3.winner as previously shown.

Quick reminder:

obj[myString] = "ultimate-champion";

How can this be accomplished?

javascript object

Answer 1

Answer №1

Success!

const data = {
   // section1: {
    //     subsection1: {
    //         subsubsection1: {
    //             title: "champion"
    //         }
    //     }
    // }
}

const myValue = "section1.subsection1.subsubsection1.title"; // note - myString value is retrieved dynamically 

const newTitle = 'ultimate-champion'

myValue.split('.')
    .reduce(
        (acc, curr) => {
            if (acc[curr] === undefined && curr !== 'title') {
                acc[curr] = {}
            }

            if (curr === 'title') {
                acc[curr] = newTitle
            }

            return acc[curr]
        }, data
    );

console.log(data) // {"section1":{"subsection1":{"subsubsection1":{"title":"ultimate-champion"}}}}

This approach does not rely on external libraries, ensuring a lightweight application.

Answer 2

Success!

const data = {
   // section1: {
    //     subsection1: {
    //         subsubsection1: {
    //             title: "champion"
    //         }
    //     }
    // }
}

const myValue = "section1.subsection1.subsubsection1.title"; // note - myString value is retrieved dynamically 

const newTitle = 'ultimate-champion'

myValue.split('.')
    .reduce(
        (acc, curr) => {
            if (acc[curr] === undefined && curr !== 'title') {
                acc[curr] = {}
            }

            if (curr === 'title') {
                acc[curr] = newTitle
            }

            return acc[curr]
        }, data
    );

console.log(data) // {"section1":{"subsection1":{"subsubsection1":{"title":"ultimate-champion"}}}}

This approach does not rely on external libraries, ensuring a lightweight application.

Answer 3

Answer №2

Utilized the method "reduce" to accomplish the desired outcome. Developed a function called "updateValue" that allows you to input obj - object to modify, str - property path to change, and value - value to assign at the property path

var obj1 = {
  level1 :{
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
}

var obj2 = { level1: {} }

var obj3 = {
  level1 :{
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
}

function updateValue(obj, str, value) {
let props = str.split('.'), arrIndex = -1
props.reduce((o,d,i) => ( 
                         arrIndex = d.indexOf('[') > -1 && d[d.indexOf('[') + 1],
                          arrIndex && (d = d.slice(0, d.indexOf('['))),
                           i == props.length - 1 
                              ? o[d] = value 
                              : (o[d] = o[d] || {}, (arrIndex && (Array.isArray(o[d]) || (o[d] = [o[d]]))), arrIndex && o[d][arrIndex] || o[d])
                        )
                , obj)
}

updateValue(obj1, 'level1.level2.level3.title', 'abcd')
updateValue(obj2, 'level1.level2.level3.title', 'abcd')
updateValue(obj3, 'level1.level2[0].title', 'abcd')

console.log(obj1)
console.log(obj2)
console.log(obj3)

Answer 4

Utilized the method "reduce" to accomplish the desired outcome. Developed a function called "updateValue" that allows you to input obj - object to modify, str - property path to change, and value - value to assign at the property path

var obj1 = {
  level1 :{
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
}

var obj2 = { level1: {} }

var obj3 = {
  level1 :{
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
}

function updateValue(obj, str, value) {
let props = str.split('.'), arrIndex = -1
props.reduce((o,d,i) => ( 
                         arrIndex = d.indexOf('[') > -1 && d[d.indexOf('[') + 1],
                          arrIndex && (d = d.slice(0, d.indexOf('['))),
                           i == props.length - 1 
                              ? o[d] = value 
                              : (o[d] = o[d] || {}, (arrIndex && (Array.isArray(o[d]) || (o[d] = [o[d]]))), arrIndex && o[d][arrIndex] || o[d])
                        )
                , obj)
}

updateValue(obj1, 'level1.level2.level3.title', 'abcd')
updateValue(obj2, 'level1.level2.level3.title', 'abcd')
updateValue(obj3, 'level1.level2[0].title', 'abcd')

console.log(obj1)
console.log(obj2)
console.log(obj3)

Answer 5

Answer №3

A practical way to achieve this is manually by iterating through the object structure and generating new objects whenever needed on the path to the target key:

const updateField = (o, path, entry) => {
  path = path.split(".");
  let curr = o;
  
  while (path.length > 1) {
    const dir = path.shift();    
    const parent = curr;
    curr = curr[dir];

    if (undefined === curr) {
      parent[dir] = {};
      curr = parent[dir];
    }
  }
  
  if (path.length === 1) {
    curr[path.shift()] = entry;
  }
  
  return o;
};

var obj = {
  level1 : {
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
};

console.log(JSON.stringify(updateField(obj, "level1.level2.level3.title", "super-winner"), null, 2));
console.log(JSON.stringify(updateField({}, "level1.level2.level3.title", "super-winner"), null, 2));

Answer 6

A practical way to achieve this is manually by iterating through the object structure and generating new objects whenever needed on the path to the target key:

const updateField = (o, path, entry) => {
  path = path.split(".");
  let curr = o;
  
  while (path.length > 1) {
    const dir = path.shift();    
    const parent = curr;
    curr = curr[dir];

    if (undefined === curr) {
      parent[dir] = {};
      curr = parent[dir];
    }
  }
  
  if (path.length === 1) {
    curr[path.shift()] = entry;
  }
  
  return o;
};

var obj = {
  level1 : {
    level2: {
      level3: {
        title: "winner"
      }
    }
  }
};

console.log(JSON.stringify(updateField(obj, "level1.level2.level3.title", "super-winner"), null, 2));
console.log(JSON.stringify(updateField({}, "level1.level2.level3.title", "super-winner"), null, 2));

Answer 7

Answer №4

To efficiently set values in an object, you can utilize the .set function provided by the lodash library. Check out the documentation here: https://lodash.com/docs#set

For example, you can use the following syntax:

_.set(obj, 'level1.level2.level3.title', 'super-winner');

Alternatively, you can achieve the same result using ES6 syntax:


var str = 'level1.level2.level3.title';
str.split('.').reduce((p, c, index) => {
    if (index === str.split('.').length - 1) {
        if (typeof p[c] !== "object") {
            p[c] = 'super-winner'
        }
        return p[c];
    } else {
        if (!p[c] || typeof p[c] !== 'object') {
            p[c] = {};
        }
        return p[c];
    }
}, obj)

console.log(obj);

Answer 8

To efficiently set values in an object, you can utilize the .set function provided by the lodash library. Check out the documentation here: https://lodash.com/docs#set

For example, you can use the following syntax:

_.set(obj, 'level1.level2.level3.title', 'super-winner');

Alternatively, you can achieve the same result using ES6 syntax:


var str = 'level1.level2.level3.title';
str.split('.').reduce((p, c, index) => {
    if (index === str.split('.').length - 1) {
        if (typeof p[c] !== "object") {
            p[c] = 'super-winner'
        }
        return p[c];
    } else {
        if (!p[c] || typeof p[c] !== 'object') {
            p[c] = {};
        }
        return p[c];
    }
}, obj)

console.log(obj);

Update a nested object key by concatenating key names with "." to create a string

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Choosing between radio buttons either horizontally or vertically within a table

Tips for choosing or moving to an iframe

Prevent clicking on a div using Jquery

Webpack is failing to load the logo PNG image file

Can you explain the purpose of the _app.js and _document.js files in Next.js? What is the significance of using an underscore (_) in Next.js?

What is the best way to style an icon in CSS?

Configure markers on Google Maps

Executing a class function within the ajax success method

Can a new EJS file be generated using the existing file as a template?

Retrieve the selected value from a radio button

RequireJS is timing out while loading the runtime configuration

Identify the page search function to reveal hidden content in a collapsible section

Tips for preventing real-time changes to list items using the onchange method

Accessing Private Files with Signed URLs from AWS S3

The concept of CSS "preload" animation

Handler for stack trace errors and error handling for promises

Click on the print icon in the modal window

Top solution for maintaining smooth navigation across web pages

Issue with AJAX communication with C# backend

The proper way to implement global scripts in Next.js