Set nested item in object/array from array of keys

Question

I have a bunch of JSON with multiple objects, arrays, strings, booleans, numbers etc. which are stored in one object at the root level and component.

Here is a sample:

{
  "theme": {
    "auto": {
      "sensor": "sensor.sn1_ldr",
      "below": 600
    },
    "ui": {
      "cards": {
        "round": false,
        "elevation": 1
      }
    },
    ...
  },
  ...
}

I have managed to pass back the path and new value of the item in an array like so:

["theme", "auto", "sensor"]

How do I from there set the new value of that path? ie. the equivalent of:

config.theme.auto.sensor = newValue;

but using the path array passed back?

Method I have so far:

handleConfigChange = (path, value) => {
  console.log(path, value);
  let config = this.state.config;
  // Set the new value

  this.setState({ config });
};

At least very very related: stackoverflow.com/questions/6491463/… The function in the accepted answer starts out by converting a given string into an array just like yours. — T.J. Crowder
– T.J. Crowder, Commented Sep 22, 2018 at 15:42

Nina Scholz · Accepted Answer · 2018-09-22 15:45:23Z

3

You could store the last key and reduce the object by taking the keys from the path.

function setValue(object, path, value) {
    var last = path.pop();
    path.reduce((o, k) => o[k] = o[k] || {}, object)[last] = value;
}

var config = { theme: { auto: { sensor: "sensor.sn1_ldr", below: 600 }, ui: { cards: { round: false, elevation: 1 } } } },
    path = ["theme", "auto", "sensor"];

setValue(config, path, 'foo');

console.log(config);

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

answered Sep 22, 2018 at 15:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timmo Over a year ago

Thanks for that! I'll have to do a bit of research into how on earth it works but it solves my problem

Muhammet Enginar · Accepted Answer · 2018-09-22 16:07:57Z

2

Below is a simple version of Nina's answer (the one using reduce).

Hope this helps you get what's going on behind that.

const setValueByPathArray = (object, path, value) => {
  let i = 0
  let reference = object
  while (i < path.length - 1) {
    const currentPath = path[i]
    reference = reference[currentPath]
    i += 1
  }
  const lastPath = path[path.length - 1]
  reference[lastPath] = value
  return object
}

const config = { theme: { auto: { sensor: "sensor.sn1_ldr", below: 600 }, ui: { cards: { round: false, elevation: 1 } } } }
const path = ["theme", "auto", "sensor"];

setValueByPathArray(config, path, 'foo')

answered Sep 22, 2018 at 16:07

Muhammet Enginar

5166 silver badges15 bronze badges

Comments

S.S. Anne · Accepted Answer · 2019-12-28 03:56:33Z

0

Use Object.key to get the key Array:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Use recursion to loop through.

const object1 = {
  "theme": {
    "auto": {
      "sensor": "sensor.sn1_ldr",
      "below": 600
    },
    "ui": {
      "cards": {
        "round": false,
        "elevation": 1
      }
    },

  },  
}

var result = [];
see(object1);
console.log(result);

function see (obj){
    var k = Object.keys(obj)
    for (var i = 0; i < k.length; i++){
        result.push(k[i]);
        if (obj[k[i]] instanceof Object){
            see(obj[k[i]]);
        }
    }
}

edited Dec 28, 2019 at 3:56

S.S. Anne

15.7k8 gold badges42 silver badges82 bronze badges

answered Sep 22, 2018 at 16:00

Terry D

3693 silver badges15 bronze badges

Comments

ggorlen · Accepted Answer · 2022-08-02 17:41:15Z

0

You can iterate over the path, keying into each level of the object until you're at the location you'd like to modify. I'm assuming valid path here, but you can raise an error if root becomes falsey (or a non-object) in the loop:

const tree = {
  "theme": {
    "auto": {
      "sensor": "sensor.sn1_ldr",
      "below": 600
    },
    "ui": {
      "cards": {
        "round": false,
        "elevation": 1
      }
    },
  },
};

const path = ["theme", "auto", "sensor"];
const newValue = "Hello World!";
let root = tree;

for (let i = 0; i < path.length - 1; i++) {
  root = root[path[i]];
}

root[path.at(-1)] = newValue;

console.log(tree);

path.slice(0, -1).forEach also works if the traditional for loop makes you uneasy.

edited Aug 2, 2022 at 17:41

answered Sep 22, 2018 at 15:53

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

Collectives™ on Stack Overflow

Set nested item in object/array from array of keys

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related