js / change nested object along path

Question

I have an object with a large nesting. I can change its content like this:

children.props.children.props.children = 'test'

I can do this:

children['props']['children']['props'].children = 'test'

I want to do this by having the path in a variable

let path = ['props','children','props']

I tried like this:

let path = ['props','children','props']
children[path].children = 'test'

let path = [['props'],['children'],['props']]
children[path].children = 'test'

But it doesn't work. Please tell me how can I use the "path" variable

Does this answer your question? Build object accessor from array in vanilla JS — Ivar
– Ivar, Commented Mar 9, 2023 at 18:02

Mr. Polywhirl · Accepted Answer · 2023-03-09 18:03:32Z

You can try to "expand" the object by using an iterative approach:

const children = {
  props: {
    children: {
      props: {
        children: 'change me'
      }
    }
  }
};

const expandObject = (component, path) => {
  let ref = component;
  for (let i = 0; i < path.length; i++) {
    ref = ref[path[i]];
  }
  return ref;
};

let path = ['props', 'children', 'props'];

expandObject(children, path).children = 'test';

console.log(children);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Here is a recursive version that uses a depth:

const children = {
  props: {
    children: {
      props: {
        children: {
          props: {
            children: 'change me'
          }
        }
      }
    }
  }
};

const deepAccess = (component, depth) =>
  (depth === 0)
    ? component
    : deepAccess(component.props.children, depth - 1);

const ref = deepAccess(children, 2);

ref.props.children = 'test';

console.log(children);

.as-console-wrapper { top: 0; max-height: 100% !important; }

As others have shown, you can reduce the path:

const children = {
  props: {
    children: {
      props: {
        children: 'change me'
      }
    }
  }
};

const expandObject = (component, path) =>
  path.reduce((acc, path) => acc[path], component);

let path = ['props', 'children', 'props'];

expandObject(children, path).children = 'test';

console.log(children);

.as-console-wrapper { top: 0; max-height: 100% !important; }

Mereke · Accepted Answer · 2023-03-09 18:00:09Z

1

This should work for you.

let path = ['props','children','props'];

const obj = { props: { children: { props: { children: null } } } };

let context = obj;

for (const name of path) {
  context = context[name];
}

context.children = "test";

console.log(obj)

answered Mar 9, 2023 at 18:00

Mereke

1098 bronze badges

Comments

Andrew Parks · Accepted Answer · 2023-03-09 18:02:24Z

0

This approach will create objects along the path if they don't already exist:

const obj = {a: { b: 'existing' }};

['a','c','d'].reduce((x,y)=>x[y]??={},obj).children = 'test'

console.log(obj)

answered Mar 9, 2023 at 18:02

Andrew Parks

8,1672 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

js / change nested object along path

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related