Click here to Skip to main content
15,868,005 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Here i am trying to create a money conversion calculator using fastforex.io api. But the result is not showing. While checking console it says; Failed to fetch at HTMLFormElement

What I have tried:

HTML
<body>
  <h1>Money Conversion Calculator</h1>
  <form id="conversion-form">
    <label>Enter an amount:</label>
    <input type="number" id="amount" />
    <br />
    <label>From:</label>
    <select id="from-currency">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
    </select>
    <br />
    <label>To:</label>
    <select id="to-currency">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
    </select>
    <br />
    <button type="submit">Convert</button>
  </form>
  <p id="result"></p>
</body>
JavaScript
const form = document.getElementById("conversion-form");
const amountInput = document.getElementById("amount");
const fromCurrencyInput = document.getElementById("from-currency");
const toCurrencyInput = document.getElementById("to-currency");
const resultElement = document.getElementById("result");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const amount = amountInput.value;
  const fromCurrency = fromCurrencyInput.value;
  const toCurrency = toCurrencyInput.value;

  const response = await fetch(
    `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
  ); // api key omitted on purpose 
  const data = await response.json();
  const result = data.result;

  resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
});
Posted
Updated 6-Jan-23 4:28am
v2

1 solution

There are a few issues with the code you have provided:

The fetch function used to send the API request is asynchronous, which means that the code after the fetch call will be executed before the request is completed. This means that the data variable will not have been assigned a value when it is used to extract the result property. To fix this, you should move the code that uses the data variable inside the then block of the fetch function, like this:

JavaScript
const response = await fetch(
  `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
);
response.json().then((data) => {
  const result = data.result;
  resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
});


The fetch function can throw an exception if there is an error with the request, such as a network error or a problem with the API server. To handle these exceptions, you should wrap the fetch call in a try-catch block.

The Failed to fetch error you are seeing in the console may be caused by a problem with the URL you are using to send the request. Make sure that the URL is correct and that the API key you are using is valid.

Here is the revised code with these changes applied:

const form = document.getElementById("conversion-form");
const amountInput = document.getElementById("amount");
const fromCurrencyInput = document.getElementById("from-currency");
const toCurrencyInput = document.getElementById("to-currency");
const resultElement = document.getElementById("result");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const amount = amountInput.value;
  const fromCurrency = fromCurrencyInput.value;
  const toCurrency = toCurrencyInput.value;

  try {
    const response = await fetch(
      `https://api.fastforex.io/convert?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&api_key=xxxxxxxxxxx`
    );
    response.json().then((data) => {
      const result = data.result;
      resultElement.innerText = `${amount} ${fromCurrency} is equal to ${result} ${toCurrency}`;
    });
  } catch (error) {
    console.error(error);
    resultElement.innerText = "An error occurred. Please try again later.";
  }
});
 
Share this answer
 
Comments
Richard Deeming 6-Jan-23 10:35am    
Your first point is wrong: the OP was awaiting both the fetch and json calls, so the following code would not execute before the call completed.

Moving the following statements into a continuation function will not do any good. The only difference it will make is that any exceptions thrown from those statements will not be caught by the try..catch block.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900