So I have a string "getNumber":
I would like to use this string as a method for an object: myObj.getNumber()
Is that possible?
Thanks
As simple as:
myObj['getNumber']();
There two ways to access value from js object .. one is dot notation . and other is square bracket notation [], which allows access to properties containing special characters and selection of properties using variables.
var key = 'getNumber';
myObj[key]();
More information on Mozilla, working with object guide.
Related
I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?
Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.
For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])
I am using this script to make a style object of all the inherited, etc. styles.
var style = css($(this));
alert (style.width);
alert (style.text-align);
With the following, the first alert will work fine, but the second one doesn't... it's interpreting the - as a minus I assume. The debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?
Look at the comments. You will see that for CSS properties, the key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way:
obj.style-attr // would become
obj["styleAttr"]
Use key notation rather than dot
style["text-align"]
All arrays in JavaScript are objects and all objects are just associative arrays. This means you can refer to a place in an object just as you would refer to a key in an array.
arr[0]
or the object
obj["method"] == obj.method
A couple things to remember when accessing properties this way:
they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.
This means obj[method] would give you an undefined error while obj["method"] would not
You must use this notation if you are using characters that are not allowed in JavaScript variables.
This regex pretty much sums it up:
[a-zA-Z_$][0-9a-zA-Z_$]*
The answer to the original question is: place the property name in quotes and use array style indexing:
obj['property-with-hyphens'];
Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you must use the camel cased name like:
style.textAlign;
However this solution only works for CSS properties. For example,
obj['a-b'] = 2;
alert(obj.aB); // undefined
alert(obj['a-b']); // 2
CSS properties with a - are represented in camelCase in JavaScript objects. That would be:
alert( style.textAlign );
You could also use a bracket notation to use the string:
alert( style['text-align'] );
Property names may only contain characters, numbers, the well known $ sign and the _ (thanks to pimvdb).
Use brackets:
var notTheFlippingStyleObject = {
'a-b': 1
};
console.log(notTheFlippingStyleObject["a-b"] === 1); // true
More information on objects: MDN
NOTE: If you are accessing the style object, CSSStyleDeclaration, you must use camelCase to access it from JavaScript. More information is here.
alert(style.textAlign)
or
alert(style["textAlign"]);
To directly answer the question: style['text-align'] is how you would reference a property with a hyphen in it. But style.textAlign (or style['textAlign']) is what should be used in this case.
Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.
To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.
To answer the question: Use square bracket notation: obj.prop is the same as obj["prop"] so you can access property names using strings and use characters that are forbidden in identifiers.
I think in the case of CSS styles they get changed to camelCase in JavaScript, so test-align becomes textAlign.
In the general case, where you want to access a property that contains non-standard characters, you use array-style: ['text-align']
The object property names are not one-to-one matches for the CSS names.
At first, I wondered why the solution didn't work on my end:
api['data-sitekey'] // Returns undefined
...later on I figured out that accessing data attributes was different:
It should be like this:
var api = document.getElementById("some-api");
api.dataset.sitekey
I have a form DOM element:
var virDom = document.getElementsByTagName("form")[0];
virDom has two fields with IDs creditId and pwdId... I can access virDom.creditId without any issue, but virDom.pwdId.. is failing with a syntax error, because of the periods contained in the name.
How can I access such properties?
Use bracket notation:
virDom['creditId']
virDom['pwdId..']
This applies to any object, and it is particularly useful for non-identifier-safe characters and also for accessing keys that you may not know ahead of time.
For a nested object with a special character like below,
var details = {"name-details": {"first-name": "Kiran"}}
use
console.log(details["name-details"]["first-name"])
How does one add a variable string in this javascript statement?
where name may correspond to any valid string , say WebkitTransform or Moztransform,etc
document.getElementById('test').style.VARIABLE_NAME = 'rotate(15deg)';
My code doesn't seem to work when i set the VARIABLE_NAME to WebkitTransform, but it works fine if I use WebkitTransform directly, as in without naming it via a variable.
Thanks in advance :)
There are two ways to access members of a Javascript object.
Dot notation, which uses an identifier to access the member:
obj.member;
Bracket notation, which uses a string to access the member:
obj['member']
The latter uses a string to locate the member and you can just as easily use any expression. The value of the expression will be converted to a string so these are equivalent:
obj[{}]
obj['[object Object]']
If your expression is already a string it will be used as is, and in your case your variable holds a string so you can just do:
document.getElementById('test').style[VARIABLE_NAME] = 'rotate(15deg)';
There are 2 ways of accessing values in javascript objects. The first one is by using the dot operator(e.g. object.memberName). The second one is by using the square bracket notation(e.g. object['memberName']).
I am using a Comet Push Engine called APE (Ajax Push Engine) and whenever I receive a realtime event I receive it in an javascript object called 'raw'.
So if for example if the raw object contains a 'location' value, I can print 'raw.location' and it will give me the value,
alert(raw.location);
So I have another object called currentSensor, which contains a value like this (in my example it would contain the string 'location'):
currentSensor.value
How do I programmatically use the currentSensor.value variable to access the 'raw' object? I have tried this:
var subsensor = currentSensor.sensorKey;
and then
alert(raw.subsensor);
But I keep getting undefined because the raw object doesn't contain a key called "subsensor" its actually "location". I hope this makes sense!
Thanks!
When using dot-notation, you use a literal property name. If you want to use a string, use square bracket notation.
foo.bar === foo['bar'];
Strings can be variables.
baz = 'bar';
foo.bar === foo[baz];
like this:
console.log(raw[currentSensor.value]);
Here you go:
alert(raw[subsensor]);
The dot syntax cannot help you when you need to access variable indexes. You need to use the array access method.
Note: The dot access method is just syntactic sugar and is not really needed in any place, but it is useful for code readability.
For your entertainment:
"1,2,3"["split"](",")["join"]("|")