javascript - Access nested objects via array of property names

Question

Say I have an object like this (simplified):

var options = {
    boxes: {
        size: {
            x: 15,
            y: 18
        },
    shadow: {
        [...]
    }
};

And I have an array of names:

var names = ['boxes', 'size', 'x'];

What is an easy way to get/set a value inside the object according to the array, in this example it would be:

options.boxes.size.x = somevalue;

Any ideas?

Answer 1

There's no easy, built-in method for doing this. You'd have to write your own method:

function getPath(obj, props) {
    for(var i = 0; i < props.length; i++) {
        if (props[i] in obj) {
            obj = obj[props[i]];
        } else {
            return; // not found
        }
    }

    return obj;
}

function setPath(obj, value, props) {
    for(var i = 0; i < props.length - 1; i++) {
        if (props[i] in obj) {
            obj = obj[props[i]];
        } else {
            return; // not found
        }
    }

    obj[props[i]] = value;
}

alert(getPath(options, names)); // 15
setPath(options, 25, names);  
alert(getPath(options, names)); // 25