Access data() object from Vue

Question

(For a currency converter)

I need to access a object like this:

rates:
  AUD: 1.708562
  SGD: 1.546211

I get these rates from an API but they don't come in order. i.e if I ask for USD to GBP it will display GBP first. So I need a way to get the requested symbols to get the values.

I tried this:

const from = res.rates.this.convertFrom.symbol;
// -----AND-----
const fromSymbol = this.convertFrom.symbol;
const from = res.rates.fromSymbol.toString();

Which didn't work

Link to the codesandbox

PS: this.convertFrom.symbol returns the input from the user. In this case, it's symbol: 'SGD'

Hope this works: link

Herbie Vine
– Herbie Vine

2020-04-18 18:56:41 +00:00
Commented Apr 18, 2020 at 18:56 — Herbie Vine
– Herbie Vine, Commented Apr 18, 2020 at 18:56
Can you access the sandbox @palaѕн?

Herbie Vine
– Herbie Vine

2020-04-18 23:23:53 +00:00
Commented Apr 18, 2020 at 23:23 — Herbie Vine
– Herbie Vine, Commented Apr 18, 2020 at 23:23

palaѕн · Accepted Answer · 2020-04-19 05:01:15Z

1

So, basically you have setup data like:

convertFrom: {
    currency: "GBP: British Pounds",
    symbol: "",
    amount: 0
},
  convertTo: {
    currency: "USD: United States Dollar",
      symbol: "",
        amount: 0
  }

Next, inside convert() method you have also set the currency symbol like:

this.convertFrom.symbol = this.convertFrom.currency.toString().split(":")[0];
this.convertTo.symbol = this.convertTo.currency.toString().split(":")[0];

So, now values of convertFrom.symbol and convertTo.symbol are:

this.convertFrom.symbol => "GBP"
this.convertTo.symbol => "USD"

You have also mentioned fetch response here is like:

{
    "success": true,
    "base": "EUR",
    "rates": {
        "GBP": 0.869339,
        "USD": 1.0875
    }
}

Now, we easily access an object's properties by using the dot notation or the bracket notation. But as the object rates keys here are dynamic, we will need to use the bracket notation like:

const from = res.rates[this.convertFrom.symbol]
const to = res.rates[this.convertTo.symbol]

Demo:

const res = {
  "success": true,
  "base": "EUR",
  "rates": {
    "GBP": 0.869339,
    "USD": 1.0875
  }
}

const data = {
  convertFrom: { symbol: "GBP" },
  convertTo: { symbol: "USD" }
}

const from = res.rates[data.convertFrom.symbol];
const to = res.rates[data.convertTo.symbol];

console.log('From:\t', from)
console.log('To:\t', to)

answered Apr 19, 2020 at 5:01

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

1 Comment

Herbie Vine Over a year ago

Yes Thanks!! I was tried res.rates.[data.convertFrom.symbol]... was so close. Thanks for the detailed response @palaѕн !

Collectives™ on Stack Overflow

Access data() object from Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related