Updating nested object by path in javascript

Question

Let's say I have this object:

{
  categories: [
     { name: "My Category", products: [ { name: "My Product", price: 15 }] },
     { name: "Another", products: [ { name: "Movie", price: 25 }, { name: "Cartoon", price: 7.5 } ] },
     { name: "Lastly", subcategories: [ 
            { name: "Food", products: [ { name: "Avocado", price: 1.25} ] }
         ] 
     }
  ]
}

I'd like to be able to update the price in this object through a function call as follows:

update(object, "categories/0/products/0",25) 
// this would change first product in first category

This answer Javascript: how to dynamically create nested objects using object names given by an array is good but does not address the case when there are arrays in the object.

Underscore acceptable.

Note: this answer Javascript: how to dynamically create nested objects INCLUDING ARRAYS using object names given by an array does not cut it because I don't have array references in that form (products[1])

How is the string generated? This could be an [XY Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) — charlietfl, May 21 '17 at 12:27
Just finding out I might be better off using json patch. Still researching. — Nick M, May 21 '17 at 13:46
All depends on higher level use case which hasn't been defined — charlietfl, May 21 '17 at 13:47

score 0 · Accepted Answer · answered May 21 '17 at 12:28

You need to slightly modify function from the linked answer

var object = {
  categories: [
     { name: "My Category", products: [ { name: "My Product", price: 15 }] },
     { name: "Another", products: [ { name: "Movie", price: 25 }, { name: "Cartoon", price: 7.5 } ] },
     { name: "Lastly", subcategories: [ 
            { name: "Food", products: [ { name: "Avocado", price: 1.25} ] }
         ] 
     }
  ]
}

function update(obj, keyPath, value) {
   keyPath = keyPath.split('/');  // split key path string
   lastKeyIndex = keyPath.length-1;
   for (var i = 0; i < lastKeyIndex; ++ i) {
     key = keyPath[i];
     
     // choose if nested object is array or hash based on if key is number
     if (!(key in obj)) obj[key] = parseInt(key) !== parseInt(key) ? {}: []
     obj = obj[key];
   }
   obj[keyPath[lastKeyIndex]] = value;
}

console.log(`Original price ${object.categories[0].products[0].price}`);
update(object, "categories/0/products/0/price",25)
console.log(`New price ${object.categories[0].products[0].price}`);

score 0 · Answer 2 · answered Jan 31 '22 at 10:23

I do this, maybe it can help.

const updateObjectValueByPath = ({ arrayPath, data, value }) => {
  const key = arrayPath[0];

  if (Array.isArray(data) && data !== null) {
    if (arrayPath.length > 1) {
      return data.map((el, index) => {
        if (index === key) {
          return updateObjectValueByPath({
            arrayPath: arrayPath.slice(1, arrayPath.length),
            data: el,
            value,
          });
        }

        return el;
      }, []);
    }

    return [...data, value];
  }

  if (typeof data === 'object' && !Array.isArray(data) && data !== null) {
    if (arrayPath.length > 1) {
      return {
        ...data,
        [key]: updateObjectValueByPath({
          arrayPath: arrayPath.slice(1, arrayPath.length),
          data: data[key],
          value,
        }),
      };
    }

    return { ...data, [key]: value };
  }

  return data;
};

const data = {
  categories: [
     { name: "My Category", products: [ { name: "My Product", price: 15 }] },
     { name: "Another", products: [ { name: "Movie", price: 25 }, { name: "Cartoon", price: 7.5 } ] },
     { name: "Lastly", subcategories: [ 
            { name: "Food", products: [ { name: "Avocado", price: 1.25} ] }
         ] 
     }
  ]
};

const arrayPath = ['categories', 0, 'products', 0, 'price'];
const value = 25;

const newData = updateObjectValueByPath({data, value, arrayPath});
console.log({newData});

Updating nested object by path in javascript

2 Answers2