JDillon522 JDillon522 - 2 months ago 15
Javascript Question

Creating object with dynamic keys

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

Heres 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')
.

Whats the best way to assign a string as a key in Javascript, considering what I'm trying to do?

Answer

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);
}
Comments