How to modify properties of nested objects?

Question

Lets say I have the following object with nested objects:

const obj = {
    Visualization: {
      Lower: [{ name: "Part", selectedValue: "60-000" }],
      Upper: [{ name: "Part", selectedValue: "60-000" }],
    },
    Holder: {
      Lower: [
        { name: "Part", selectedValue: "30-000" },
        { name: "Project Name", selectedValue: "45-000" },
      ],
      Upper: [
        { name: "Part", selectedValue: "22-000" },
        { name: "Project Name", selectedValue: "25-000" },
      ],
    },
  };

And I want to change the selectedValue of all of them at once to "0" and have the following result:

  {
    Visualization: {
      Lower: [{ name: "Part", selectedValue: "0" }],
      Upper: [{ name: "Part", selectedValue: "0" }],
    },
    Holder: {
      Lower: [
        { name: "Part", selectedValue: "0" },
        { name: "Project Name", selectedValue: "0" },
      ],
      Upper: [
        { name: "Part", selectedValue: "0" },
        { name: "Project Name", selectedValue: "0" },
      ],
    },
  }

How can I make it properly?

Thank you!

Obligatory, "what have you tried" - but [lodash.set](https://lodash.com/docs/4.17.15#set) (and there are lots of similar utilities) is what you should be looking at. — Adam Jenkins, Dec 09 '20 at 17:32
`lodash.set` is useful when your object structure is predictable, which may not be the case here. — craftsman, Dec 09 '20 at 17:37
You can't do it all "at once". You're changing multiple variables. No matter what you use, even if it is written by someone else, the internal logic will change each variable one at a time — Taplar, Dec 09 '20 at 17:39
Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Taplar, Dec 09 '20 at 17:39

score 1 · Accepted Answer · answered Dec 09 '20 at 17:47

function deepSet(o, propertyName, propertyValue) {
    Object.keys(o).forEach(key => {
        if (key === propertyName) {
            o[key] = propertyValue;
            return;
        }

        if (Array.isArray(o[key])) {
            o[key].forEach(item => {
                deepSet(item, propertyName, propertyValue);
            });
            return;
        }

        if (typeof o[key] !== 'object') {
            return;
        }

        deepSet(o[key], propertyName, propertyValue);
    });
}

JSFiddle: https://jsfiddle.net/713vfdrg/

score -1 · Answer 2 · answered Dec 09 '20 at 17:51

You can handle this recursively and update the original object.

All I did was check to see if the object is an Array. If it is then you loop through the array and update each objects selectedValue to be 0. This will update those keys arrays.

If it is not an array then that means you are dealing with an object, either the parent or children object, so then you loop over the keys and drill down the object structure for each key.

This function below assumes that the data will be in that format you have shown above.

const obj = {
    Visualization: {
        Lower: [{ name: "Part", selectedValue: "60-000" }],
        Upper: [{ name: "Part", selectedValue: "60-000" }],
    },
    Holder: {
        Lower: [
            { name: "Part", selectedValue: "30-000" },
            { name: "Project Name", selectedValue: "45-000" },
        ],
        Upper: [
            { name: "Part", selectedValue: "22-000" },
            { name: "Project Name", selectedValue: "25-000" },
        ],
    },
};

function updateSelectedValue(obj, keyToUpdate, valueUpdate) {
    if(Array.isArray(obj)){
        obj.forEach((content, idx) => {
            if(obj[idx][keyToUpdate]){
                obj[idx][keyToUpdate] = valueUpdate;
            }

        })
        return;
    }

    const keys = Object.keys(obj);
    for(const key in obj){
        updateSelectedValue(obj[key], keyToUpdate, valueUpdate);
    }
}

updateSelectedValue(obj, "selectedValue", 0)
console.log(obj)

How to modify properties of nested objects?

2 Answers2