Set JavaScript object property by traversing array

Question

I'm looking for a way to walk an object based on an array and set the property for the last key on the object, for example:

var myArr = [ 'foo', 'bar', 'quz' ];
var myVal = 'somethingElse';
var myObj = {
    foo: {
        bar: {
            quz: 'something'
        }
    }
};

I'd like to be able to change the value of the quz property to somethingElse. I've tried recursing but I feel like there's an easier way to do this.

I've been looking to lodash but can't find a method that seems to allow me to accomplish this.

so you already constructed such an object and just want to update the value? — ABOS
– ABOS, Commented Apr 11, 2015 at 14:54
correct, this is a default configuration object I'm looking to be able to override. — Fluidbyte
– Fluidbyte, Commented Apr 11, 2015 at 14:54

Rick Hitchcock · Accepted Answer · 2015-04-11 16:25:47Z

1

You could walk the object like this:

var myArr = [ 'foo', 'bar', 'quz' ],
    myVal = 'somethingElse',
    myObj = {
      foo: {
        bar: {
          quz: 'something'
        }
      }
    };

var obj= myObj;
do {
  obj= obj[myArr.shift()];
} while(myArr.length>1);

obj[myArr[0]]= 'somethingElse';

document.body.innerHTML= JSON.stringify(myObj);

Update

To address @Tomalak's concerns, and because you didn't specifically forbid a recursive solution, here's a reusable function with no side effects (other than changing the appropriate value of the object):

function setObj(obj, arr, val) {
  !(arr.length-1) && (obj[arr[0]]=val) ||
  setObj(obj[arr[0]], arr.slice(1), val);
}

Short-circuit evaluation prevents this from being an infinite loop.

Snippet:

var myArr = [ 'foo', 'bar', 'quz' ],
    myVal = 'somethingElse',
    myObj = {
      foo: {
        lorem: 'ignore me',
        bar: {
          quz: 'something'
        },
        other: {
          quz: 'leave me be'
        }
      }
    };

function setObj(obj, arr, val) {
  !(arr.length-1) && (obj[arr[0]]=val) ||
  setObj(obj[arr[0]], arr.slice(1), val);
}

setObj(myObj, myArr, 'somethingElse');

document.body.innerHTML= JSON.stringify(myObj);

edited Apr 11, 2015 at 16:25

answered Apr 11, 2015 at 15:04

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

4 Comments

Tomalak Over a year ago

Actually, that is not really clean. It's not reusable and it modifies the original array, i.e. it has undesirable side effects.

Rick Hitchcock Over a year ago

@Tomalak, good point about modifying the original array. See my update.

Tomalak Over a year ago

The function will throw for non-arrays and arrays of length 0. It throws when obj is null or undefined. Correct code > clever one-liners.

Rick Hitchcock Over a year ago

Throwing an error can be preferable to silently returning. If the application is for medical, database, or missile-guidance purposes, it could be better to abort a program when invalid data is encountered. Depending on the application, a try ... catch ... finally could handle invalid data.

Tomalak · Accepted Answer · 2015-04-11 15:09:18Z

0

var myArr = [ 'foo', 'bar', 'quz' ];
var myVal = 'somethingElse';
var myObj = {
    foo: {
        bar: {
            quz: 'something'
        }
    }
};

function setHierarchcally(obj, keys, value) {
    if ( !(obj && keys && keys.length) ) return;
    if ( !obj.hasOwnProperty(keys[0]) ) return;

    if (keys.length === 1) {
        obj[keys[0]] = value;
    } else {
        setHierarchcally(obj[keys[0]], keys.slice(1, keys.length), value);
    }
}


setHierarchcally(myObj, myArr, myVal);

answered Apr 11, 2015 at 15:09

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Comments

user663031 · Accepted Answer · 2015-04-11 15:16:57Z

0

getPath digs down into an object to get a property several levels deep based on an array of "paths", in your case MyArr. Use that to get the object containing the final property, and then just set it.

function getPath(obj, paths) {
  return paths.reduce(function(obj, path) { return obj[path]; }, obj);
}

function setLastProperty(obj, paths, val) {
  var final = paths.pop();
  getPath(obj, paths) [ final ] = val;
}

setLastProperty(MyObj, MyArray, MyVal);

answered Apr 11, 2015 at 15:16

user663031

Comments

ABOS · Accepted Answer · 2015-04-11 16:00:57Z

0

If you want more general object traverse, you can tweak js-travserse a little bit, as demoed in this jsfiddle I just created:

`https://jsfiddle.net/yxpx9wvL/10/


var leaves = new Traverse(myObj).reduce(function (acc, x) {
if (this.isLeaf) acc.push(x);
  return acc;
}, []);

alert(leaves[0]);

edited Apr 11, 2015 at 16:00

answered Apr 11, 2015 at 15:10

ABOS

3,8413 gold badges19 silver badges25 bronze badges

1 Comment

Tomalak Over a year ago

Please don't post answers that contain no code, but only links to external pages. When the link breaks, the answer becomes unusable. And we are on a programming site, the code belongs into the answer.

Collectives™ on Stack Overflow

Set JavaScript object property by traversing array

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related