How to set nested object with dynamic keys on javascript

Question

let foo = {};

const key1 = 'a';
const key2 = 'b';
const key3 = 'c';

foo[key1][key2][key3] = [1, 2];

When I trying to do something similar I get:

Uncaught TypeError: Cannot read property 'b' of undefined

Answer 1

You have to create the nested object before you can create a property in it.

 let foo = {} const key1 = 'a' const key2 = 'b' const key3 = 'c' foo[key1] = {}; foo[key1][key2] = {}; foo[key1][key2][key3] = [1, 2]; console.log(foo); 

If the list of keys is generated dynamically in an array, see Populate nested object from array? for a function to create all the objects.

Answer 2

You can also create the literal object with dynamic keys. Just make sure to create nested objects where necessary as @Barmar demonstrated.

 const key1 = 'a' const key2 = 'b' const key3 = 'c' let foo = { [key1]: { [key2]: { [key3]: [1, 2] } } }; console.log(foo.abc); 

Answer 3

You can create a function which takes three parameters:

• The object on which keys will be added.
• The array of keys in order.
• The value which will be set to the last level.

Use forEach loop to loop though the keys. Except for last index add empty {} to the key. And change the current object to that empty object.

 let foo = {} function nestedKey(obj,keys,value){ keys.forEach((x,i) => { obj[x] = i === keys.length -1 ? value : {}; obj = obj[x] }) } nestedKey(foo,['a','b','c'],[1,2]); console.log(foo) 

Answer 4

Using Array#reduce will make this possible, however the keys need to be in a list and in reverse order.

 const key1 = 'a' const key2 = 'b' const key3 = 'c' const foo = [key3, key2, key1].reduce((a,c)=>({[c]:a}), [1, 2]); console.log(foo); 

Answer 5

Try (improved Barmar answer without keys repetition)

 let foo = {}, t; const key1 = 'a'; const key2 = 'b'; const key3 = 'c'; t= foo[key1]= {}; t= t[key2]= {}; t[key3]= [1, 2]; console.log(foo); 

If foo has more (nested) values they will be saved