Question

I want to change ‘hello’ to ‘hey’ programmatically, the solution should work with any number of nested elements (I just use 2 levels to keep it simple).

var data = {level1: {level2 : 'hello' }};

I have access to the ‘data’ variable, the path (‘level1/level2’) and the new value (‘hey’).

I tried to do:

var parents = 'level1/level2'.split('/');
var target = data;
for(var i=0; i<parents.length; i++){
   target = data[parents[i]];
}
target = 'hey';

The idea was to travel to the root

target = data

then 1 level deep

target = data['level1'] 

…keep going

target = data['level1']['level2'] //data['level1'] === target

and modify the contents

target = 'hey'

But it looks like a lose the reference to the original object (data) when I do (target = target[‘level2’]).

I guess I can build a string with the path and then evaluate it:

eval("data['level1']['level2']='hey');

Is there a better solution that dosen’t involve eval()?

Answer 1

There are two issues. First is that you keep using data inside the loop, which means you’re trying to access the top level keys instead of the inner keys. Change target = data[parents[i]]; to

target = target[parents[i]];

The second is that when you change the variable target, you’re not changing the data variable but target instead. If you drop out of the loop one iteration earlier you can update the object which is stored as a reference:

for(var i=0; i<parents.length-1; i++){
   target = target[parents[i]];
}
target[parents[i]] = 'hey';

Demo: http://jsfiddle.net/Lherp/