Setting nested object properties with dynamic name [duplicate]

Question

Coming off my previous question (which was about getting the property), I need to set the value of a nested object member using a dynamic property name.

const settings = {
  service: {
    username: 'foo',
    password: 'bar'
  }
};

const settingName = 'service.username';
const newValue = 'baz';

settings[settingName] = newValue ; // doesn't work
console.log(settings.service.username); // foo

The only way I can think of is to use eval:

eval(`settings.${settingName} = "${newValue}"`);

const settings = {
  service: {
    username: 'foo',
    password: 'bar'
  }
}

const settingName = 'service.username';

const newValue = 'baz';

eval(`settings.${settingName} = "${newValue}"`); // works, but bad

console.log(settings.service.username);

But this has problems (for example, the example above assumes the new value is a string). Is there a way to assign a property of a nested object whose name is not known without using eval?

Can't you just use a slightly modified version of the getter function from your other question? — nnnnnn
– nnnnnn, Commented Sep 18, 2016 at 11:17

Rajaprabhu Aravindasamy · Accepted Answer · 2016-09-18 11:08:54Z

1

You can do it like below,

var settings = {service: {username: 'TEST', password: ''}}
var key = "service.username";

function setValue(obj, keys, val){
  keys.split(".").forEach(function(itm, i, arr){
    if (i == arr.length - 1) obj[itm] = val;
    else obj = obj[itm];
  });
}

setValue(settings, key, "hello");
console.log(settings.service.username); //"hello"

answered Sep 18, 2016 at 11:08

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GOTO 0 · Accepted Answer · 2016-09-18 11:17:35Z

0

Also a follow-up on my previous answer: yes.

We can use the Function constructor to create and run code that will set the property by its name, as if it were done with a regular dot property access.

const settings = {
  service: {
    username: 'foo',
    password: 'bar'
  }
};

const settingName = 'service.username';
const newValue = 'baz';

Function('settings', 'value', 'settings.' + settingName + ' = value')(settings, newValue);

console.log(settings.service.username); // "baz"

answered Sep 18, 2016 at 11:17

GOTO 0

48.8k25 gold badges140 silver badges165 bronze badges

2 Comments

Marks Polakovs Over a year ago

How is this different from my eval example above? (I mean, how is this better than eval?)

GOTO 0 Over a year ago

@marksomnian My code works for values of any type (not just strings). If you're unclear about the differences between eval and the Function constructor, you may want to have a look here: stackoverflow.com/questions/4599857/…

Collectives™ on Stack Overflow

Setting nested object properties with dynamic name [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related