JavaScript assign value to element in nested object without knowing level

Question

say I have an object like this:

a : {
  a1 : {
    a2: true
  } 
}

and I have all the path saved in an array:

[a1, a2]

If I want to assign value to a["a1"]["a2"], it is easy:

a["a1"]["a2"] = true;

However when I have a 3 level path like this:

[a1, a2, a3]

I have to manually write the code like this:

a["a1"]["a2"]["a3"] = true;

Is there a way to automatically handle any level of paths so that I don't have to make it explicit for every single case?

Note that "a" can be quite complex so I only want to assign value to this specific element and without touching the rest.

I don't understand how the "path saved in an array" has to do with your question. Also, can you just type a.a1.a2.a3? Perhaps edit your question so you have a full function showing what you want to do, then a comment saying which line you think is too verbose that you want to minimize or change. — Mark Hildreth
– Mark Hildreth, Commented May 14, 2013 at 0:46
possible duplicate of Accessing nested JavaScript objects with string key — Bergi
– Bergi, Commented May 14, 2013 at 0:56

Elle · Accepted Answer · 2013-05-14 07:50:57Z

5

You could iteratively traverse the object with the path like so:

function setDeepProperty(obj, path, value)
{
    var curr = obj;

    for (var depth = 0; depth < path.length - 1; depth++)
    {
        curr = curr[path[depth]];
    }

    curr[path[path.length - 1]] = value;
}

This assumes that the path is valid. Ensure that path[depth] in curr if necessary. The last step in the traversal is done outside of the loops because it would be setting curr to a primitive type instead of referencing an array (as we desire) meaning it wouldn't change the original. Then, as per your example:

var arr = {a1: {a2: { a3: false }}};
setDeepProperty(arr, ["a1", "a2", "a3"], true);

Note here that the nodes in the path are strings.

edited May 14, 2013 at 7:50

answered May 14, 2013 at 0:56

Elle

3,7751 gold badge20 silver badges32 bronze badges

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

Comments

plalx · Accepted Answer · 2013-05-14 01:13:16Z

3

There are several ways you could access the properties:

Use a loop:

var obj = {
        a1 : {
            a2: { a3: 'test' }
        } 
    },
    i = 0,
    keyPath = ['a1', 'a2', 'a3'],
    len = keyPath.length;

    for (; i < len; i++) {
        obj = obj[keyPath[i]];
    }

    console.log(obj);

With eval (I don't recommend this however):

var obj = {
            a1 : {
                a2: { a3: 'test' }
            } 
        };

var value = eval('obj.' + keyPath.join('.'));

console.log(value);

You could use the same approach to set a property at a specific key path:

function setProperty(obj, keyPath, value) {
    var i = 0,
        len = keyPath.length - 1;

    for (; i < len; i++) {
        obj = obj[keyPath[i]];
    }

    obj[keyPath[i]] = value;
}

edited May 14, 2013 at 1:13

answered May 14, 2013 at 0:54

plalx

43.8k7 gold badges77 silver badges94 bronze badges

3 Comments

cHao Over a year ago

@Bergi: Eh. You weren't gonna do it. :)

plalx Over a year ago

@Bergi, Just showing existing alternatives for educationnal purposes.

Hypnos Over a year ago

All are great answers, thank you! Select this answer for being the most comprehensive one.

PSL · Accepted Answer · 2013-05-14 01:03:35Z

1

All are elegant solutions, my 2 cents with recursion:-

Test Here

var a = {
    a1: {
        a2: {
            a3: false
        }
    }
};

var path = ['a1', 'a2', 'a3'];

var valueToSet = true;
setValue(0, a);


function setValue(level, ob) {
  var prop = path[level];

  if (!ob.hasOwnProperty(prop)) {
    return;
  }
   if (level == (path.length - 1)) {
    ob[prop] = valueToSet;
    return;
   }

   return setValue(level + 1, ob[prop]);

}
console.log(a);

answered May 14, 2013 at 1:03

PSL

124k21 gold badges257 silver badges243 bronze badges

Comments

Eugen Rieck · Accepted Answer · 2013-05-14 00:54:03Z

0

You have 2 possibilities:

the dreaded eval(). I refuse giving code for that
an in-out loop:

Code:

var a={
  a1 : {
    a2 : {
      a3: false
    } 
  } 
};
var idx=["a1", "a2", "a3"];

function recReplace(o, i, v) {
  var ii=i.shift();
  if (i.length==0)
    o[ii]=v;
  else
   o[ii]=recReplace(o[ii],i,v);
  return o;
}

b=recReplace(a,idx,true); //or: a=recReplace(a,idx,true);

answered May 14, 2013 at 0:54

Eugen Rieck

65.6k10 gold badges75 silver badges97 bronze badges

Comments

georg · Accepted Answer · 2013-05-14 17:16:12Z

0

Sure, it's a simple loop:

var a = {a1:{a2:{}}};

var path = ["a1", "a2", "a3"];
for (var o=a, i=0; i<path.length-1; i++)
    o = o[path[i]]; // notice that this will throw exception
                    // when the objects do not exist already
o[path[i]] = true;

edited May 14, 2013 at 17:16

georg

216k57 gold badges324 silver badges401 bronze badges

answered May 14, 2013 at 0:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

georg Over a year ago

much worse, it does NOT throw if a key exist, but isn't an object (check {a1:{a2:999}}).

Bergi Over a year ago

Yeah, for that you'd need to use if (Object(o) !== o) throw new TypeError("Did encounter non-object, not going to get/set properties on this");.

Collectives™ on Stack Overflow

JavaScript assign value to element in nested object without knowing level

5 Answers 5

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related