Access nested object property and update its value through Generic method

Question

I want create a generic method which will access a nested object property and update its value passed as argument.

This is my data structure
 var student = {
  name: 'Tom',
  address: {
    pincode: 43301,
    street: '12th Main',
    city: 'Some city',
  },
  marks: {
    sub1: 111,
    sub2: 222
  }
}

This is my skeleton of the generic method

updatProperty(student, 'marks.sub1', 125) {
  // this method should return student object with marks.sub1 to be 125
}

I have refereed this link , but this will only return me a value

You might want to read [this](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Ivan, May 27 '18 at 14:12

score 3 · Accepted Answer · answered May 27 '18 at 14:19

3

You could do this with reduce method, where you check if current value exists and if length of your string key is equal to current element and then change value.

var student = {"name":"Tom","address":{"pincode":43301,"street":"12th Main","city":"Some city"},"marks":{"sub1":111,"sub2":222}}

function updatProperty(obj, key, value) {
  key.split('.').reduce((r, e, i, a) => {
    if (r[e] && a.length - 1 == i) r[e] = value
    return r[e] || {}
  }, obj)
}

updatProperty(student, 'marks.sub1', 125);
console.log(student)

answered May 27 '18 at 14:19

Nenad Vracar

118,580
15
151
176

This is the best solution. – Cory Kleiser May 27 '18 at 14:35
Awesome!, Exactly what i was looking for. – Lakshman Kumar May 27 '18 at 14:57

Cory Kleiser · Answer 2 · 2018-05-27T14:21:38.787

1

You're on the right track. I would go ahead and do it like this. THis way you can pass an array in of the value you want to change (i.e. ['marks', 'sub1']) and it will change whatever value you want. See the below example of how I change student.marks.sub1 and student.address.city:

var student = {
  name: 'Tom',
  address: {
    pincode: 43301,
    street: '12th Main',
    city: 'Some city',
  },
  marks: {
    sub1: 111,
    sub2: 222
  }
}

function updateProperty(student, keys, value) {
    obj = student;

    for(var i=0; i<keys.length-1; i++){
        obj = obj[keys[i]];
    }

    obj[keys[i]] = value;
    
    return student;
}


console.log(updateProperty(student, ['marks', 'sub1'], 125));
console.log(updateProperty(student, ['address', 'city'], 'New York'));

edited May 27 '18 at 14:21

answered May 27 '18 at 14:00

Cory Kleiser

1,969
2
13
26

Thanks Cory, but I want the path to my object to be dynamic. It should be able to handle any level of nesting – Lakshman Kumar May 27 '18 at 14:11
@LakshmanKumar .. I've updated my answer to make it dynamic. Take a look. – Cory Kleiser May 27 '18 at 14:22

score 1 · Answer 3 · answered May 27 '18 at 14:10

[Immediate solution] I would suggest something like:

function updatProperty(obj, propPath, value) {

    if(!propPath) return false;

    const keys = propPath.split('.');
    let pointer = obj,
        validPath = true;
    for (let i = 0; i < keys.length && validPath; i++) {

        let key = keys[i];

        if(i === (keys.length - 1)) pointer[key] = value;
        else {
            if(!pointer[key]) validPath = false;
            else pointer = pointer[key];
        }
    }

    return validPath;
}

[Explaining] Following you function signature, I reason by

spliting the "path string" by '.' and therefore get an array in order to navigate through the object.
Create a loop by using the keys and navigate/ validate the object till reach the wanted prop - if the path is valid to the object, everything goes ok otherwise the loop stops and the function returns false.

Something I assumed but not mentioned by you is the function returned value - true if everything goes well and false if not (no propPath or if the object is "incorrect").

Hope it helps.

Access nested object property and update its value through Generic method

3 Answers3