How To Set A JS object property name from a variable

Question

I am in need to set a JS object property name dynamically.

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

Result should be:

data = {
    1name: 'name1'
    2name: 'name1'
}

I want to know which three of you hit the wrong arrow. C'mon, fess up. — Charles, Dec 12 '12 at 05:26
possible duplicate of [Using a variable for a key in a JavaScript object literal](http://stackoverflow.com/questions/2274242/using-a-variable-for-a-key-in-a-javascript-object-literal) — halfer, Mar 10 '15 at 09:43

Musa · Answer 1 · 2015-12-23T19:35:32.793

216

You'll have to use [] notation to set keys dynamically.

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

Now in ES6 you can use object literal syntax to create object keys dynamically, just wrap the variable in []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

edited Dec 23 '15 at 19:35

answered Dec 12 '12 at 05:14

Musa

96,336
17
118
137

3

jsonVariable = {}; should not be initialized inside the for loop. – closure Dec 12 '12 at 05:15
Also you're making jsonVariable global here – Dennis Plucinik Dec 12 '12 at 05:17

score 210 · Accepted Answer · answered Dec 12 '12 at 05:14

210

var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

answered Dec 12 '12 at 05:14

closure

7,412
1
23
23

5

Musa's response below also correctly articulates that using [] notation is actually the only way to do it. – Dennis Plucinik Dec 12 '12 at 05:19
1

Also note that @ChilNut's response below now describes the easiest way of doing this using ES6 – Michael Ramos Jan 28 '16 at 14:34
1

Actually, with the new syntax what OP is trying to achieve will only be possible if the loop limit is hardcoded and small. – Musa Jan 28 '16 at 17:36

chiliNUT · Answer 3 · 2016-12-22T19:32:17.720

146

With ECMAScript 6, you can use variable property names with the object literal syntax, like this:

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

This syntax is available in the following newer browsers:

Edge 12+ (No IE support), FF34+, Chrome 44+, Opera 31+, Safari 7.1+

(https://kangax.github.io/compat-table/es6/)

You can add support to older browsers by using a transpiler such as babel. It is easy to transpile an entire project if you are using a module bundler such as rollup or webpack.

edited Dec 22 '16 at 19:32

answered Jun 18 '15 at 23:29

chiliNUT

18,989
14
66
106

Without ES6 I can't define var payload={dynamicKey:val} , I need to do var payload={} and payload[variableName]=val. – Sainath S.R Apr 02 '18 at 11:36

BorisD · Answer 4 · 2019-09-15T10:58:52.687

41

Use a variable as an object key

let key = 'myKey';

let data = {[key] : 'name1'; }

See How to iterete on your object here

edited Sep 15 '19 at 10:58

answered May 02 '19 at 14:18

BorisD

1,611
17
22

1

Can you please elaborate a little more to let others know why this might be a solution? – phaberest May 02 '19 at 15:47
The info you added are fine, just never give an answer with just code ;) – phaberest Sep 16 '19 at 16:09

timc · Answer 5 · 2012-12-12T05:20:05.047

22

This is the way to dynamically set the value

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}

edited Dec 12 '12 at 05:20

answered Dec 12 '12 at 05:14

timc

2,124
15
13

score 8 · Answer 6 · answered Oct 01 '15 at 07:56

8

It does not matter where the variable comes from. Main thing we have one ... Set the variable name between square brackets "[ .. ]".

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

answered Oct 01 '15 at 07:56

Knut Hering

89
1
2

This works nice, I wonder if it works in all browsers / versions – Mercury Dec 20 '15 at 15:38

score 1 · Answer 7 · answered Dec 12 '12 at 05:18

1

jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

this will be similar to

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

answered Dec 12 '12 at 05:18

yednamus

582
1
4
22

score 0 · Answer 8 · answered Jun 14 '19 at 12:33

Along the lines of Sainath S.R's comment above, I was able to set a js object property name from a variable in Google Apps Script (which does not support ES6 yet) by defining the object then defining another key/value outside of the object:

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;

How To Set A JS object property name from a variable

8 Answers8

Linked

Related