342

I'm pulling items out of the DOM with jQuery and want to set a property on an object using the id of the DOM element.

Example

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

If itemsFromDom includes an element with an id of "myId", I want obj to have a property named "myId". The above gives me name.

How do I name a property of an object using a variable using JavaScript?

3

13 Answers 13

556

You can use this equivalent syntax:

obj[name] = value

Example:

let obj = {};
obj["the_key"] = "the_value";

or with ES6 features:

let key = "the_key";
let obj = {
  [key]: "the_value",
};

in both examples, console.log(obj) will return: { the_key: 'the_value' }

3
  • 3
    Is there a name for this syntax? Or a link I can read more on?
    – Pixelsmith
    Commented Feb 9, 2022 at 19:52
  • 1
    Here’s the documentation on how to access properties, and how to create objects. Commented Oct 27, 2022 at 3:11
  • 3
    @Pixelsmith they are known as Computed property names.
    – luissquall
    Commented Nov 22, 2022 at 23:48
152

With ECMAScript 2015 you can do it directly in object declaration using bracket notation:

var obj = {
  [key]: value
}

Where key can be any sort of expression (e.g. a variable) returning a value:

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}
8
  • 15
    This question is about modifying existing object, not creating a new one. Commented Dec 26, 2015 at 10:16
  • 35
    This particular question might be about modifying but it's referenced by other questions that are about dynamically creating objects and so I ended up here and happily benefited from this answer. Commented Oct 29, 2016 at 17:40
  • 2
    @wOxxOm lol yeah why would I go through the hassle of obj[name]=value when I could just use your suggestion instead
    – chiliNUT
    Commented Mar 17, 2017 at 23:17
  • 2
    I'm not sure what ECMAScript 6 is, but I appreciate it very much Commented Apr 10, 2017 at 12:23
  • 2
    @ArthurTarasov: ECMAScript 6 is more formally called ECMAScript 2015 ("ES2015") aka ECMAScript 6th edition ("ES6"). It's the specification for JavaScript released June 2015. Since then we've had ES2016 and soon we'll have ES2017, they're on a yearly cycle now. Commented Apr 18, 2017 at 16:06
12

You can even make List of objects like this

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.push(feeType);
});
6

There are two different notations to access object properties

  • Dot notation: myObj.prop1
  • Bracket notation: myObj["prop1"]

Dot notation is fast and easy but you must use the actual property name explicitly. No substitution, variables, etc.

Bracket notation is open ended. It uses a string but you can produce the string using any legal js code. You may specify the string as literal (though in this case dot notation would read easier) or use a variable or calculate in some way.

So, these all set the myObj property named prop1 to the value Hello:

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

Pitfalls:

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

tl;dnr: If you want to compute or reference the key you must use bracket notation. If you are using the key explicitly, then use dot notation for simple clear code.

Note: there are some other good and correct answers but I personally found them a bit brief coming from a low familiarity with JS on-the-fly quirkiness. This might be useful to some people.

3

With lodash, you can create new object like this _.set:

obj = _.set({}, key, val);

Or you can set to existing object like this:

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

You should take care if you want to use dot (".") in your path, because lodash can set hierarchy, for example:

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }
3

First we need to define key as variable and then we need to assign as key as object., for example

var data = {key:'dynamic_key',value:'dynamic_value'}
var key = data.key;
var obj = { [key]: data.value}
console.log(obj)

2

Related to the subject, not specifically for jquery though. I used this in ec6 react projects, maybe helps someone:

this.setState({ [`${name}`]: value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[name]));
    });

PS: Please mind the quote character.

1
  • Per above answers, { [${name}]: value} can be simply { [name]: value}. The template literal is unnecessary.
    – Madbreaks
    Commented Sep 23, 2020 at 21:50
2

If you want to add fields to an object dynamically, simplest way to do it is as follows:

let params = [
  { key: "k1", value: 1 },
  { key: "k2", value: 2 },
  { key: "k3", value: 3 },
];
let data = {};

for (let i = 0; i < params.length; i++) {
  data[params[i].key] = params[i].value;
}

console.log(data); // -> { k1: 1, k2: 2, k3: 3 }
1

With the advent of ES2015 Object.assign and computed property names the OP's code boils down to:

var obj = Object.assign.apply({}, $(itemsFromDom).map((i, el) => ({[el.id]: el.value})));
1

ajavascript have two type of annotation for fetching javascript Object properties:

Obj = {};

1) (.) annotation eg. Obj.id this will only work if the object already have a property with name 'id'

2) ([]) annotation eg . Obj[id] here if the object does not have any property with name 'id',it will create a new property with name 'id'.

so for below example:

A new property will be created always when you write Obj[name]. And if the property already exist with the same name it will override it.

const obj = {}
    jQuery(itemsFromDom).each(function() {
      const element = jQuery(this)
      const name = element.attr('id')
      const value = element.attr('value')
      // This will work
      obj[name]= value;
    })
0

If you have object, you can make array of keys, than map through, and create new object from previous object keys, and values.

Object.keys(myObject)
.map(el =>{
 const obj = {};
 obj[el]=myObject[el].code;
 console.log(obj);
});
-2

objectname.newProperty = value;

0
-3
const data = [{
    name: 'BMW',
    value: '25641'
  }, {
    name: 'Apple',
    value: '45876'
  },
  {
    name: 'Benz',
    value: '65784'
  },
  {
    name: 'Toyota',
    value: '254'
  }
]

const obj = {
  carsList: [{
    name: 'Ford',
    value: '47563'
  }, {
    name: 'Toyota',
    value: '254'
  }],
  pastriesList: [],
  fruitsList: [{
    name: 'Apple',
    value: '45876'
  }, {
    name: 'Pineapple',
    value: '84523'
  }]
}

let keys = Object.keys(obj);

result = {};

for(key of keys){
    let a =  [...data,...obj[key]];
    result[key] = a;

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.