Dynamically create a nested JavaScript object with unknown keys

Question

Let's say I have two arrays which are returned in a response from a REST call. For simplification I defined them hard-coded as keys and subKeys in the following example code.

From these arrays I'd like to create a nested object which, when outputted as a JSON string, looks like this:

Target JSON

{
    "key1": {
        "subKey1": "someValue"
    },
    "key2": {
        "subKey2": "someValue"
    },
    "key3": {
        "subKey3": "someValue"
    }
}

Code sample

var keys = ["key1", "key2", "key3"];  // These come from a REST response
var subKeys = ["subKey1", "subKey2", "subKey3"]; // These come from a REST response

var targetObj = {}
for (const key in keys) {      
  targetObj[key] = {}
  for (const subKey in subKeys) {
    targetObj[key][subKey] = "someValue";
  }
}
console.log(JSON.stringify(targetObj, null, 2));

While this gives me the correct behavior in my application I have the impression that there might be simpler approaches to achieve the same result, either in "vanilla" JavaScript or ES6? What bothers me here is that I define an empty object in each run of the for loop.

Always Learning · Accepted Answer · 2020-05-03 15:37:20Z

Your code does not produce the example output you said you want. It will put all 3 subkeys under each key, not one per key. Also you end up with numeric keys, not the key names.

var keys = ["key1", "key2", "key3"];  // These come from a REST response
var subKeys = ["subKey1", "subKey2", "subKey3"]; // These come from a REST response

var targetObj = {}
for (let i=0; i<keys.length; i++) {    
  const key = keys[i];
  targetObj[key] = { [subKeys[i]]: "someValue" };
}
console.log(JSON.stringify(targetObj, null, 2));

First you were using "in" instead of "of" in the for-loop, and secondly you were not using the same index to find the subkey.

To avoid creating an empty object you can use this syntax:

{ [variable]: "value" }

This creates the object with the variable value as the key, and a string as the value. Putting the variable name in square brackets tells it to use the variable value rather than its name. Saying { variable: "value" } wouldn't work because the key would be "variable" not the value of variable.

dhilt · Accepted Answer · 2020-05-03 15:31:45Z

3

Just use Array.prototype.reduce method:

const keys = ["key1", "key2", "key3"];
const subKeys = ["subKey1", "subKey2", "subKey3"];

const result = keys.reduce((acc, key, index) =>
   ({ ...acc, [key]: { [subKeys[index]]: 'someValue' } })
, {});

Note, this works only if keys and subKeys arrays are synced and their indexes are consistent with each other.

answered May 3, 2020 at 15:31

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Collectives™ on Stack Overflow

Dynamically create a nested JavaScript object with unknown keys

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related