I have an object like this which I console log like this:
console.log(node.data.target.fields);
file:
en-US: {url: "//images.ctfassets.net/qkwv5aiilkmk/4YsaPFrSxMPKuMVnO/efb6b59a369e4f30105aaea54fb9f62f/aaa.jpeg", details: {…}, fileName: "aaa.jpeg", contentType: "image/jpeg"}
I want to access the url value but It throws an error :
const url = node.data.target.fields.file.['en-US'].url;
How can I access the en-Us variable properly?
Since en-US cannot be used as a variable name (- is an operator, cannot be used as a part of a variable), you cannot use the dot notation. So the only way you can access is using the [] notation.
const url = node.data.target.fields.file['en-US'].url;
The above is the right way of accessing it, else, you can also access this way:
const lang = 'en-US';
const url = node.data.target.fields.file[lang].url;
Two cases example:
const node = {
data: {
target: {
fields: {
file: {
"en-US": {
url: "//images.ctfassets.net/qkwv5aiilkmk/"
}
}
}
}
}
};
(() => {
console.log("Using direct access...");
const url = node.data.target.fields.file['en-US'].url;
console.log(url);
})();
(() => {
console.log("Using a variable...");
const lang = 'en-US';
const url = node.data.target.fields.file[lang].url;
console.log(url);
})();
To add from the given answer just a few guidelines for accessing Object Properties here are some tips that would help you in the future.
1. Dot property accessor
This common way to access the property of an object is the dot property accessor syntax:
expression.identifier
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
1.1 Dot property accessor requires identifiers
-The dot property accessor works correctly when the property name is a valid identifier. An identifier in JavaScript contains Unicode letters, $, _, and digits 0..9, but cannot start with a digit.
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject['prop-3']; // => 'three'
weirdObject[3]; // => 'three'
2. Square brackets property accessor:
-expression[expression]
const property = 'name';
const hero = {
name: 'Batman'
};
// Square brackets property accessor:
hero['name']; // => 'Batman'
hero[property]; // => 'Batman'
3. Object destructuring:
const hero = {
name: 'Batman'
};
// Object destructuring:
const { name } = hero;name; // => 'Batman'
Note that you can extract as many properties as you’d like: const { identifier1, identifier2, .., identifierN } = expression;
file.['en-US'].urllooks like a simple typo, did you mean to dofile['en-US'].urlIOW: you put an extra dot in there.