Nested object properties with dynamic name

Question

Context: I'm writing a Redux reducer (although this question is not Redux-specific) for my app's settings, which is a nested object. I want to modify the settings object using property names that are given dynamically.

Example:

const settings = {
  service: {
    username: 'TEST',
    password: ''
  }
}

// Normally this would be passed by Redux, but for the purposes of this exercise it's hardcoded

const settingKey = 'service.username';

console.log(settings[settingKey]); // undefined

console.log(eval(`settings.${settingKey}`)); // works, but bad

The only way I can think of accessing the subobject without using eval is using a regex to split the settingKey into its component parts:

const match = /(.+)\.(.+)/.exec(settingKey);
console.log(settings[match[1]][match[2]];

const settings = {
  service: {
      username: 'TEST',
      password: ''
  }
}

const settingKey = 'service.username';

const match = /(.+)\.(.+)/.exec(settingKey);

console.log(settings[match[1]][match[2]]);

This works, but

It's ugly
It doesn't work for more deeply nested objects

Is there a way of accessing a nested object's properties with a dynamic name without using regexes or eval?

Rajaprabhu Aravindasamy · Accepted Answer · 2016-09-18T09:25:35.237

5

You can do something like this,

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

function getValue(obj, keys){
  keys.split(".").forEach(function(itm){
    obj = obj[itm];
  });
  return obj;
}

getValue(settings, key); //"TEST"

Or you can do it simply using Array#reduce,

var settings = {service: {username: 'TEST', password: ''}}
var key = "service.username", result = key.split(".").reduce((a,b) => a[b], settings);
console.log(result); // "TEST"

edited Sep 18 '16 at 09:25

answered Sep 18 '16 at 09:19

Rajaprabhu Aravindasamy

66,513
17
101
130

Thank you. I was hoping there would be a nicer way, but this will have to do. – Marks Polakovs Sep 18 '16 at 09:25
1

ES6 version: `settingName.split('.').reduce((prev, itm) => prev[itm], settings)` – Marks Polakovs Sep 18 '16 at 09:25
@marksomnian We had similar intuitions.. :) – Rajaprabhu Aravindasamy Sep 18 '16 at 09:26
@Downvoter: Downvote without a comment is not fair. :\ – Rajaprabhu Aravindasamy Sep 18 '16 at 11:26

score 0 · Answer 2 · answered Sep 18 '16 at 09:25

0

Another option that doesn't use eval and works with nested properties.

var settings = {service: {username: 'TEST', password: ''}}
var key = "service.username";
console.log(Function('setting', 'return settings.' + key)(settings));

answered Sep 18 '16 at 09:25

GOTO 0

42,323
22
125
158

I didn't even know you could do this. Seems a bit eval-ly, but still cool. – Marks Polakovs Sep 18 '16 at 09:27
1

Isn't this just `eval()` by another name? – nnnnnn Sep 18 '16 at 11:15
@nnnnnn [Read here](http://stackoverflow.com/questions/4599857/are-eval-and-new-function-the-same-thing). – GOTO 0 Sep 18 '16 at 11:19
So in other words... yes, they're the same thing for *this* purpose, where the input is in a known format. – nnnnnn Sep 18 '16 at 11:30

score -1 · Answer 3 · answered Sep 18 '16 at 10:43

-1

I think you just change one bit:

const settings = {
  service: {
    username: 'TEST',
    password: ''
  }
}
console.log(settings['service'].username);

answered Sep 18 '16 at 10:43

Thanh Dong

101
1
1
6

This does not answer the question. The `['service'].username` is not known at runtime (all I have is `service.username`). – Marks Polakovs Sep 18 '16 at 11:07
i don't understand you. Can you explain more clearly ?? – Thanh Dong Sep 18 '16 at 16:03

Nested object properties with dynamic name

3 Answers3

Linked