0

Is it possible to dynamically set keys when using this syntax as shown in this example?

In this example, the changeValue function changes the state object show at the top. The changeValue function takes an array of string keys to be used as a way to dynamically set the value.

This code does not work and I am not looking for alternative approaches: (within reasonable alternation)

const state = {
    profile: {
        isFollowing: false,
    },
    person: {
        characteristics: {
            gender: "male"
        }
    }
}




console.log(state.profile.isFollowing) //false
console.log(state.person.characteristics.gender) //male
function changeValue(keys, value){
    state[keys] = value
}
console.log(state.profile.isFollowing) //true
console.log(state.person.characteristics.gender) //female




changeValue(["profile", "isFollowing"], true) //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
//    profile: {
//        isFollowing: true,
//    },
//    person: {
//       characteristics: {
//            gender: "male"
//        }
//    }
//}




changeValue(["person", "characteristics", "gender"], "female") //<-- using an array of strings
//AFTER STATE CHANGE
//const state = {
//    profile: {
//        isFollowing: true,
//    },
//    person: {
//       characteristics: {
//            gender: "female"
//        }
//    }
//}

I don't want to have to manually define the [keys] within the changeValue function.

Is this possible?

Improve this question

3 Answers 3

Reset to default
3

Sure thing. A helper function like this should do the trick.

const state = {
  profile: {
    isFollowing: false,
  },
  person: {
    characteristics: {
      gender: "male"
    }
  }
}

function changeValue(target, path, value) {
  for(let i = 0; i < path.length - 1; i++) {
    target = target[path[i]];
  }
  target[path[path.length - 1]] = value;
}


console.log(JSON.stringify(state));
changeValue(state, ["profile", "isFollowing"], true);
console.log(JSON.stringify(state));
changeValue(state, ["person", "characteristics", "gender"], "female");
console.log(JSON.stringify(state));

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

Comments

2

No, you can't just index into an object with an array and have it automatically descend hierarchically. There are modules you can install that let you do similar things; for example, check out lodash's set method. You have to join the array into a single .-separated key path string, but it's basically what you're looking for.

However, it's also pretty easy to do it yourself in vanilla JS with a loop:

function changeValue(keyPath, newValue) {
    let target = state
    let key = keyPath[0]
    for (let i=1; i<keyPath.length; ++i) {
        target = target[key]
        key = keyPath[i]
    }
    target[key] = newValue;
}

Here it is in action: 

const state = {
    profile: {
        isFollowing: false,
    },
    person: {
        characteristics: {
            gender: "male"
        }
    }
}

function changeValue(keyPath, newValue) {
    let target = state
    let key = keyPath[0]
    for (let i=1; i<keyPath.length; ++i) {
        target = target[key]
        key = keyPath[i]
    }
    target[key] = newValue;
}

changeValue(["profile", "isFollowing"], true);
changeValue(["person", "characteristics", "gender"], "female")
console.log(state);

Improve this answer

5 Comments

Dang, I wish we could. It is what it is though. I would appreciate if you could name those modules, that would be helpful.
Probably the most common module is lodash.get: lodash.com/docs/4.17.15#get which takes a string of JS-looking syntax for object/array access, so you could do something like _.get(state, ["profile", "isFollowing"].join("."))
(There is also lodash.set which accepts the new value as the third param)
Updated with links to lodash. But note that the function in my answer lets you call changeValue exactly as in your post (in fact I pasted from your question into my snippet), so I'm not sure what your objection to the solution is.
@MarkReed I don't, I'm just waiting the 5 minutes to accept your answer. I was also interested in the lodash module after you brang it up.
0

Another method could be to use reduce to work up the object until you get to the last item and then set it's value.

const state = { profile: { isFollowing: false, }, person: { characteristics: { gender: "male" } } }

function changeValue(keys, value){
  keys.slice(0,-1).reduce((acc, k) => acc[k], state)[keys.slice(-1)] = value
}

changeValue(["profile", "isFollowing"], true);
console.log(state);

changeValue(["person", "characteristics", "gender"], "female");
console.log(state);

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.