marksomnian marksomnian - 2 months ago 11
Javascript Question

Nested object properties with dynamic name

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


  1. It's ugly

  2. 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?

Answer

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"