Access object child properties using a dot notation string [duplicate]

Access object child properties using a dot notation string [duplicate]

This question already has an answer here:

Accessing nested JavaScript objects with string key

31 answers

I’m temporarily stuck with what appears to be a very simple JavaScript problem, but maybe I’m just missing the right search keywords!
Say we have an object
var r = { a:1, b: {b1:11, b2: 99}};

There are several ways to access the 99:
r.b.b2
r[‘b’][‘b2’]

What I want is to be able to define a string
var s = “b.b2”;

and then access the 99 using
r.s or r[s] //(which of course won’t work)

One way is to write a function for it that splits the string on dot and maybe recursively/iteratively gets the property. But is there any simpler/more efficient way? Anything useful in any of the jQuery APIs here?

Solutions/Answers:

Solution 1:

Here’s a naive function I wrote a while ago, but it works for basic object properties:

function getDescendantProp(obj, desc) {
    var arr = desc.split(".");
    while(arr.length && (obj = obj[arr.shift()]));
    return obj;
}

console.log(getDescendantProp(r, "b.b2"));
//-> 99

Although there are answers that extend this to “allow” array index access, that’s not really necessary as you can just specify numerical indexes using dot notation with this method:

getDescendantProp({ a: [ 1, 2, 3 ] }, 'a.2');
//-> 3

Solution 2:

split and reduce while passing the object as the initalValue

var r = { a:1, b: {b1:11, b2: 99}};
var s = "b.b2";

var value = s.split('.').reduce(function(a, b) {
  return a[b];
}, r);

console.log(value);

Update
(thanks to comment posted by TeChn4K)

With ES6 syntax, it is even shorter

var r = { a:1, b: {b1:11, b2: 99}};
var s = "b.b2";

var value = s.split('.').reduce((a, b) => a[b], r);

console.log(value);

Solution 3:

You can use lodash get() and set() methods.

Getting

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// → 3

Setting

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// → 4

Solution 4:

If it’s possible in your scenario that you could put the entire array variable you’re after into a string you could use the eval() function.

var r = { a:1, b: {b1:11, b2: 99}};
var s = "r.b.b2";
alert(eval(s)); // 99

I can feel people reeling in horror

Solution 5:

Extending @JohnB’s answer, I added a setter value as well. Check out the plunkr at

http://plnkr.co/edit/lo0thC?p=preview

enter image description here

function getSetDescendantProp(obj, desc, value) {
  var arr = desc ? desc.split(".") : [];

  while (arr.length && obj) {
    var comp = arr.shift();
    var match = new RegExp("(.+)\\[([0-9]*)\\]").exec(comp);

    // handle arrays
    if ((match !== null) && (match.length == 3)) {
      var arrayData = {
        arrName: match[1],
        arrIndex: match[2]
      };
      if (obj[arrayData.arrName] !== undefined) {
        if (typeof value !== 'undefined' && arr.length === 0) {
          obj[arrayData.arrName][arrayData.arrIndex] = value;
        }
        obj = obj[arrayData.arrName][arrayData.arrIndex];
      } else {
        obj = undefined;
      }

      continue;
    }

    // handle regular things
    if (typeof value !== 'undefined') {
      if (obj[comp] === undefined) {
        obj[comp] = {};
      }

      if (arr.length === 0) {
        obj[comp] = value;
      }
    }

    obj = obj[comp];
  }

  return obj;
}

Solution 6:

This is the simplest i could do:

var accessProperties = function(object, string){
   var explodedString = string.split('.');
   for (i = 0, l = explodedString.length; i<l; i++){
      object = object[explodedString[i]];
   }
   return object;
}
var r = { a:1, b: {b1:11, b2: 99}};

var s = "b.b2";
var o = accessProperties(r, s);
alert(o);//99