Get dynamically data from an object in React

Question

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. ????;
      }
    }
  }

In the option you have to use value instead of defaultValue, e.g: <option value='USD'>USD</option> — henk
– henk, Commented Mar 30, 2022 at 16:51

gunwin · Accepted Answer · 2022-03-30 16:55:55Z

1

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);

answered Mar 30, 2022 at 16:55

gunwin

4,8525 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J. Cutshall · Accepted Answer · 2022-03-30 17:02:24Z

1

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 (-))

Collectives™ on Stack Overflow

Get dynamically data from an object in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related