如何从 API 获取响应数据并从数据中编码函数以使用 node js JavaScript 获取结果

Question

I think did a mess with the coding cause I'm still a newbie in node.js, javascript and vue. I did a Currency Converter by get the data from API to get the exchange rates and did some calculation in function. In the 'Inspect', the console did get the exchange rates from the selected country but there is no result, did my calculation is wrong? or the code in the function such a mess? I need help. So, here is my code from beginning:

<h1 id="main-heading">Currency Conversion</h1>
<div id="input-container">
    <span class="input-text">Convert</span>
    <select id="from-currency" v-model="fromCurrency">
        <option value="">Select currency</option>
        <option value="USD">US Dollar (USD)</option>
        <option value="MYR">Malaysia (MYR)</option>
    </select>
    <input type="number" id="from-amount" placeholder="Amount" v-model="fromAmount" />
    <span class="input-text">To</span>
    <select id="to-currency" v-model="toCurrency">
        <option value="">Select currency</option>
        <option value="USD">US Dollar (USD)</option>
        <option value="MYR">Malaysia (MYR)</option>
    </select>
    <button type="button" id="convert-btn" @click="clickConvert()">
        Convert
    </button>

cont..

</div>
<div id="result-container" v-if="convertClicked">
    <h2 id="result" v-if="!loading">
        <span id="from-span">{{ fromAmount }} {{ fromCurrency }}</span> =
        <span id="to-span">{{ result }} {{ toCurrency }}</span>
    </h2>
    <h2 v-else>Loading...</h2>
</div>

cont...

export default {
name: 'Index',
components: {
},
data() {
    return {
        fromCurrency: '',
        toCurrency: '',
        fromAmount: 0,
        result: '',
        convertClicked: false,
        loading: false,
    }
},

the functions...

methods: {
    clickConvert() {
        if (!(this.fromCurrency == '' || this.toCurrency == '' || (this.fromAmount <= 0) || this.fromCurrency == this.toCurrency)) {
            this.convertClicked = true
        }
        this.convert()
    },

function cont...

convert() {
        if (this.fromCurrency == '' || this.toCurrency == '' || (this.fromAmount <= 0) || this.fromCurrency == this.toCurrency) {
            alert("Please check your inputs and try again")
        } else {
            this.loading = true
            let uri = 'https://api.exchangeratesapi.io/latest?symbols=' + this.fromCurrency + "," + this.toCurrency;
            fetch(uri, {
                    "method": "GET",
                })
                .then((response => response.json()))
                .then(function (data) {
                    console.log(data.rates)
                    for (let [key, value] of Object.entries(data.rates))
                        var jsResult = data.rates;
                    var toCurrency = response.json(this.toCurrency);
                    var fromCurrency = response.json(this.fromCurrency);
                    var fromAmount = response.json(this.fromAmount);
                    var result = this.result;
                    var oneUnit = jsResult.toCurrency / jsResult.fromCurrency;
                    result = (oneUnit * fromAmount).toFixed(2);
                    this.loading = false
                })
                .catch(err => {
                    alert("There was a problem fetching the results. Please try again." + err)
                })
        }
    }

it turns out like this...(where can't convert the currency but can get the exchange rates) cannot get the result, pls help

The error is said that ReferenceError: response is not defined.

Answer 1

The second part of your promise chain will lose the context of this as you are trying to use it here.

                .then(function (data) {
                    console.log(data.rates)
                    for (let [key, value] of Object.entries(data.rates))
                        var jsResult = data.rates;
                    var toCurrency = response.json(this.toCurrency);
                    var fromCurrency = response.json(this.fromCurrency);
                    var fromAmount = response.json(this.fromAmount);
                    var result = this.result;
                    var oneUnit = jsResult.toCurrency / jsResult.fromCurrency;
                    result = (oneUnit * fromAmount).toFixed(2);
                    this.loading = false
                })

You can either redefine this higher in the scope of the convert() function and use the new variable, or adjust your function here to be an arrow function, which will persist the context of this . The latter option is certainly the easier and better one.

.then((data) => {
    ...

You can see more on arrow functions and context here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions