Why does the following work?
<something>.stop().animate(
{ 'top' : 10 }, 10
);
Whereas this doesn't work:
var thetop = 'top';
<something>.stop().animate(
{ thetop : 10 }, 10
);
To make it even clearer: At the moment I'm not able to pass a CSS property to the animate function as a variable.
This question is related to
javascript
jquery
variables
properties
object-literal
You can also try like this:
let array1 = [{_x000D_
"description": "THURSDAY",_x000D_
"count": "1",_x000D_
"date": "2019-12-05"_x000D_
},_x000D_
{_x000D_
"description": "WEDNESDAY",_x000D_
"count": "0",_x000D_
"date": "2019-12-04"_x000D_
}]_x000D_
let res = array1.map((value, index) => {_x000D_
return { [value.description]: { count: value.count, date: value.date } }_x000D_
})_x000D_
console.log(res);
_x000D_
I couldn't find a simple example about the differences between ES6 and ES5, so I made one. Both code samples create exactly the same object. But the ES5 example also works in older browsers (like IE11), wheres the ES6 example doesn't.
ES6
var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';
matrix[a] = {[b]: {[c]: d}};
ES5
var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';
function addObj(obj, key, value) {
obj[key] = value;
return obj;
}
matrix[a] = addObj({}, b, addObj({}, c, d));
Update: As a commenter pointed out, any version of JavaScript that supports arrow functions will also support ({[myKey]:myValue})
, so this answer has no actual use-case (and, in fact, it might break in some bizarre corner-cases).
Don't use the below-listed method.
I can't believe this hasn't been posted yet: just use arrow functions with anonymous evaluation!
Completely non-invasive, doesn't mess with the namespace, and it takes just one line:
myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
demo:
var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);
_x000D_
useful in environments that don't support the new I stand corrected; just wrap the thing in parenthesis and it works.{[myKey]: myValue}
syntax yet, such as—apparently; I just verified it on my Web Developer Console—Firefox 72.0.1, released 2020-01-08.
(I'm sure you could potentially make some more powerful/extensible solutions or whatever involving clever use of reduce
, but at that point you'd probably be better served by just breaking out the Object-creation into its own function instead of compulsively jamming it all inline)
not that it matters since OP asked this ten years ago, but for completeness' sake and to demonstrate how it is exactly the answer to the question as stated, I'll show this in the original context:
var thetop = 'top';
<something>.stop().animate(
((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);
If you want object key to be same as variable name, there's a short hand in ES 2015. New notations in ECMAScript 2015
var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10
Adding square bracket around the variable works good for me. Try this
var thetop = 'top';
<something>.stop().animate(
{ [thetop] : 10 }, 10
);
Given code:
var thetop = 'top';
<something>.stop().animate(
{ thetop : 10 }, 10
);
Translation:
var thetop = 'top';
var config = { thetop : 10 }; // config.thetop = 10
<something>.stop().animate(config, 10);
As you can see, the { thetop : 10 }
declaration doesn't make use of the variable thetop
. Instead it creates an object with a key named thetop
. If you want the key to be the value of the variable thetop
, then you will have to use square brackets around thetop
:
var thetop = 'top';
var config = { [thetop] : 10 }; // config.top = 10
<something>.stop().animate(config, 10);
The square bracket syntax has been introduced with ES6. In earlier versions of JavaScript, you would have to do the following:
var thetop = 'top';
var config = (
obj = {},
obj['' + thetop] = 10,
obj
); // config.top = 10
<something>.stop().animate(config, 10);
You could do the following for ES5:
var theTop = 'top'
<something>.stop().animate(
JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)
Or extract to a function:
function newObj (key, value) {
return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}
var theTop = 'top'
<something>.stop().animate(
newObj(theTop, 10), 10
)
2020 update/example...
A more complex example, using brackets and literals...something you may have to do for example with vue/axios. Wrap the literal in the brackets, so
[ ` ... ` ]
{
[`filter[${query.key}]`]: query.value, // 'filter[foo]' : 'bar'
}
This way also you can achieve desired output
var jsonobj={};_x000D_
var count=0;_x000D_
$(document).on('click','#btnadd', function() {_x000D_
jsonobj[count]=new Array({ "1" : $("#txtone").val()},{ "2" : $("#txttwo").val()});_x000D_
count++;_x000D_
console.clear();_x000D_
console.log(jsonobj);_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<span>value 1</span><input id="txtone" type="text"/>_x000D_
<span>value 2</span><input id="txttwo" type="text"/>_x000D_
<button id="btnadd">Add</button>
_x000D_
ES5 quote that says it should not work
Note: rules have changed for ES6: https://stackoverflow.com/a/2274327/895245
Spec: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5
PropertyName :
- IdentifierName
- StringLiteral
- NumericLiteral
[...]
The production PropertyName : IdentifierName is evaluated as follows:
- Return the String value containing the same sequence of characters as the IdentifierName.
The production PropertyName : StringLiteral is evaluated as follows:
- Return the SV [String value] of the StringLiteral.
The production PropertyName : NumericLiteral is evaluated as follows:
- Let nbr be the result of forming the value of the NumericLiteral.
- Return ToString(nbr).
This means that:
{ theTop : 10 }
is the exact same as { 'theTop' : 10 }
The PropertyName
theTop
is an IdentifierName
, so it gets converted to the 'theTop'
string value, which is the string value of 'theTop'
.
It is not possible to write object initializers (literals) with variable keys.
The only three options are IdentifierName
(expands to string literal), StringLiteral
, and NumericLiteral
(also expands to a string).
With ECMAScript 2015 you are now able to do it directly in object declaration with the brackets notation:
var obj = {
[key]: value
}
Where key
can be any sort of expression (e.g. a variable) returning a value.
So here your code would look like:
<something>.stop().animate({
[thetop]: 10
}, 10)
Where thetop
will be evaluated before being used as key.
You can do it this way:
var thetop = 'top';
<something>.stop().animate(
new function() {this[thetop] = 10;}, 10
);
ES5 implementation to assign keys is below:
var obj = Object.create(null),
objArgs = (
(objArgs = {}),
(objArgs.someKey = {
value: 'someValue'
}), objArgs);
Object.defineProperties(obj, objArgs);
I've attached a snippet I used to convert to bare object.
var obj = {_x000D_
'key1': 'value1',_x000D_
'key2': 'value2',_x000D_
'key3': [_x000D_
'value3',_x000D_
'value4',_x000D_
],_x000D_
'key4': {_x000D_
'key5': 'value5'_x000D_
}_x000D_
}_x000D_
_x000D_
var bareObj = function(obj) {_x000D_
_x000D_
var objArgs,_x000D_
bareObj = Object.create(null);_x000D_
_x000D_
Object.entries(obj).forEach(function([key, value]) {_x000D_
_x000D_
var objArgs = (_x000D_
(objArgs = {}),_x000D_
(objArgs[key] = {_x000D_
value: value_x000D_
}), objArgs);_x000D_
_x000D_
Object.defineProperties(bareObj, objArgs);_x000D_
_x000D_
});_x000D_
_x000D_
return {_x000D_
input: obj,_x000D_
output: bareObj_x000D_
};_x000D_
_x000D_
}(obj);_x000D_
_x000D_
if (!Object.entries) {_x000D_
Object.entries = function(obj){_x000D_
var arr = [];_x000D_
Object.keys(obj).forEach(function(key){_x000D_
arr.push([key, obj[key]]);_x000D_
});_x000D_
return arr;_x000D_
}_x000D_
}_x000D_
_x000D_
console(bareObj);
_x000D_
I have used the following to add a property with a "dynamic" name to an object:
var key = 'top';
$('#myElement').animate(
(function(o) { o[key]=10; return o;})({left: 20, width: 100}),
10
);
key
is the name of the new property.
The object of properties passed to animate
will be {left: 20, width: 100, top: 10}
This is just using the required []
notation as recommended by the other answers, but with fewer lines of code!
ES6 / 2020
If you're trying to push data to an object using "key:value" from any other source, you can use something like this:
let obj = {}
let key = "foo"
let value = "bar"
obj[`${key}`] = value
// A `console.log(obj)` would return:
// {foo: "bar}
// A `typeof obj` would return:
// "object"
Hope this helps someone :)
Source: Stackoverflow.com