Cannot use ${}while accessing a property inside an object - javascript

So I'm trying access the property named all like this
let lang = organizationLocales[0].locale;
alertDetails.alertMessage.`${lang}`.all
But sadly, I'm getting an error near that dollar symbol saying that "identifier expected", I just want to access the property in a dynamic way as the variable lang will be changing based on the user input. I'd appreciate any help, thanks in advance.
P.S organizationLocales is an array that has nothing to do with alertDetails object.

You can access to the property of an object through the index accessor []. So if you want to use a string to address a property, you should enclose such string inside square brackets.
You have to think of it like an associative array where each property name is paired to its value, including functions. Since in js syntax, the dot expects the property name statically defined, you cannot compose an identifier like that. But yet you can use a different way to get there without relying on dot.
To better answer to your specific problem, this may be the solution:
let lang = organizationLocales[0].locale;
alertDetails.alertMessage[lang].all

Related

attach string variable to document object

I have a variable called current_slide which contains a string called "default"
Now I have a object called document.referencemap:
How can I attach the "default" string from current_slide to the object document.referencemap so that I will get
document.referncemap.default ?
What is the best way to attach a string to the object?
At the moment I am calling the object property manually like:
document.referncemap.default.
Can anybody give me a hint so I can solve this issue?
My code looks like this
Because the current slide is always changing i need to load the object from the value of current_slide.
You can use this:
temp0 = document.referencemap[current_slide.slide];
Explanation:
There are two ways to get values from Javascript objects,
using property notation: temp0 = document.referencemap.welcome;
using dictionary notation: temp0 = document.referencemap["welcome"];
This will get the exact same item from the object. Note however that 2. uses a string key. Because of that you can also use a variable that contains a string, in this case: temp0 = document.referencemap[current_slide.slide];
use:
document.referencemap[current_slide] = booBar
make sure current_slide is of type string. Read the Property accessors
docs for more information.

Not able to read javascript object property such as "first-Name" [duplicate]

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

How to use string as a object method?

I am trying to use an element class name and call it as a method for my object.
var thisClass=$this.attr('class')
//thisClass = 'call'
obj.thisClass(ID);
My codes don't work as I wanted to be. Are there anyways to solve this? Thanks a lot!
You can do
obj[methodName](arguments, ...);
This works because functions are objects as well in javascript and are themselves only attributes of their objects. Object properties can be accessed with the . and the [] notation whereas the [] notations is needed for dynamic names or names that are not legal javascript identifiers.

Javascript get value from an object with the name contains special charactor

This is my object abcd; This object contains some variables such the names: #promo, #size, #color, #value etc. so how could I print these?
I have use alert(abcd.{"#value"}) but this is showing me an error. So how could I get the value of the variable?
There are two ways to access an object's property: obj.key and obj["key"]. The latter allows you to use any value or variable, which is what you want here.
Therefore, you should use abcd["#value"].

How do I reference a JavaScript object property with a hyphen in it?

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

Categories

Resources