I build an app in React and I have this object from an API:
let currency = {
"success": true,
"timestamp": 1648656784,
"base": "EUR",
"date": "2022-03-30",
"rates": {
"AED": 4.09826,
"AFN": 98.736662,
"RON": 4.947456,
"USD": 1.11575,
"GBP": 0.848656
}
}
In my code, I have a dropdown list where I can choose what currency I want:
<select name='currencyOptions' onChange={(e) => showCurrency(e.target.value)}>
<option defaultValue='USD'>USD</option>
<option defaultValue="EUR">EUR</option>
<option defaultValue='RON'>RON</option>
<option defaultValue='GBP'>GBP</option>
</select>
When I choose another currency from my dropdown list, I try to get the currency from that object dynamically, but I don't know the syntax.
function showCurrency(curr) {
let products_list = [...products];
for (let i = 0; i < products_list.length; i ++) {
if(currentCurrency === 'EUR') {
products_list[i].price = products_list[i].price * currency[0].rates. ????;
} else {
console.log(currency[0].rates.curr);
products_list[i].price = products_list[i].price / currency[0].rates. ????;
}
}
}
You can access keys to an object in two different main ways.
const obj = {
regularKey: "regularValue",
"weird key": "weirdValue",
}
console.log(obj.regularKey) // "regularValue"
console.log(obj["regularKey"]) // "regularValue" same as above
console.log(obj.weird key) // <- ERROR
console.log(obj["weird key"]) // "weirdValue" This Works
So basically if you have the key name like "weird key" | "regularKey" and you want to access its value use bracket notation to access the value. Dot notation only works if you know exactly what the key is and the key doesn't contain any weird characters (likes spaces or dashes (-))
You can access items in an object similar to how you would in an array with named keys:
let currency = {
"success": true,
"timestamp": 1648656784,
"base": "EUR",
"date": "2022-03-30",
"rates": {
"AED": 4.09826,
"AFN": 98.736662,
"RON": 4.947456,
"USD": 1.11575,
"GBP": 0.848656
}
}
// Directly
let gbpValue = currency.rates["GBP"];
console.log(gbpValue);
// Using another var
let currencyKey = "AED";
let aedValue = currency.rates[currencyKey];
console.log(aedValue);