Creating object with dynamic keys [duplicate]

Question

First off, I'm using Cheerio for some DOM access and parsing with Node.js.

Here's the situation:

I have a function that I need to create an object. That object uses variables for both its keys and values, and then return that single object. Example:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    var key   = this.attr('name')
     ,  value = this.attr('value');

     return { key : value }
  }) 

  callback(null, inputs);
}

It outputs this:

[ { key: '1' }, { key: '1' } ]

(.map() returns an array of objects fyi)

I need key to actually be the string from this.attr('name').

What's the best way to assign a string as a key in JavaScript, considering what I'm trying to do?

you can get dynamic object's key with by: myObj['key'] — Rizwan
– Rizwan, Commented Feb 8, 2019 at 11:19

user2864740 · Accepted Answer · 2016-09-07 19:59:46Z

1198

In the new ES2015 standard for JavaScript (formerly called ES6), objects can be created with computed keys: Object Initializer spec.

The syntax is:

var obj = {
  [myKey]: value,
}

If applied to the OP's scenario, it would turn into:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    return {
      [this.attr('name')]: this.attr('value'),
    };
  }) 

  callback(null, inputs);
}

Note: A transpiler is still required for browser compatiblity.

Using Babel or Google's traceur, it is possible to use this syntax today.

In earlier JavaScript specifications (ES5 and below), the key in an object literal is always interpreted literally, as a string.

To use a "dynamic" key, you have to use bracket notation:

var obj = {};
obj[myKey] = value;

In your case:

stuff = function (thing, callback) {
  var inputs  = $('div.quantity > input').map(function(){
    var key   = this.attr('name')
     ,  value = this.attr('value')
     ,  ret   = {};

     ret[key] = value;
     return ret;
  }) 

  callback(null, inputs);
}

edited Sep 7, 2016 at 19:59

user2864740

62.5k15 gold badges159 silver badges234 bronze badges

answered Nov 7, 2013 at 14:05

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

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

6 Comments

JDillon522 Over a year ago

Great edit. Now if ES6 can just be officially released we might have a shot at world peace! :)

Johnny Oshika Over a year ago

You can use Computed Property Keys now if you're willing to use a transpiler like Babel. Example: babeljs.io/repl/…

haotang Over a year ago

Great update about computed keys. That's what I'm looking for these days. I just wonder how did you know about this "magic". Reading the (so long) ES2015 spec document?

Vamshi Vangapally Over a year ago

For computed keys, I am getting a syntax error when using gulp minify task. Any body faced this? and any solution?

Mahi Tej Gvp Over a year ago

can this also work for nested Objects suppose i have a nested object can i use var obj ={ [dynamic key][dynamic key]=someValue }

|

2 revs · Accepted Answer · 2015-11-14 10:45:09Z

73

You can't define an object literal with a dynamic key. Do this :

var o = {};
o[key] = value;
return o;

There's no shortcut (edit: there's one now, with ES6, see the other answer).

edited Nov 14, 2015 at 10:45

community wiki

2 revs
Denys Séguret

1 Comment

Dtipson Over a year ago

I think in es6 you can now do this: var propname = 'thing' {[propname]:5} -> {thing:5} See this for more : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Creating object with dynamic keys [duplicate]

2 Answers 2

6 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Linked

Related