Getting full name of the currencies from exchange rate API in JS-CodePudding

I try to create a simple exchange rate program that converts one currency to other. It is almost done. After clicking convert button, result should be shown also as span and h1 format, nevertheless, I am able to demonstrate abbreviation of currencies not fullname of them. Their fullnames are in "currencies[i [1".

const before = document.querySelector("span")
const after = document.querySelector("h1")
const input = document.querySelector("input")
const select = document.querySelectorAll("select")
const converted = document.querySelector("#converted")
const convertBtn = document.querySelector("button")

fetch("https://api.frankfurter.app/currencies")
  .then(data => data.json())
  .then(data => display(data))

//creating currency options for select element
const display = data => {
  const currencies = (Object.entries(data))
  for (let i = 0; i < currencies.length; i  ) {
    select[0].innerHTML  = `<option value="${currencies[i][0]}">${currencies[i][0]}</option>`
    select[1].innerHTML  = `<option value="${currencies[i][0]}">${currencies[i][0]}</option>`
  }
}

//event of convert button
convertBtn.addEventListener("click", () => {
  let filledCurrency = select[0].value
  let wantedCurrency = select[1].value
  let value = input.value

  if (filledCurrency != wantedCurrency) {
    convert(filledCurrency, wantedCurrency, value)
  } else {
    alert("You have chosen same currency")
  }
})

//convert method
const convert = (filledCurrency, wantedCurrency, value) => {
  const host = "api.frankfurter.app"
  fetch(
      `https://${host}/latest?amount=${value}&from=${filledCurrency}&to=${wantedCurrency}`
    )
    .then(value => value.json())
    .then(value => {
      converted.value = Object.values(value.rates)[0];
      before.textContent = `${input.value} ${filledCurrency} EQUALS`
      after.textContent = `${input.value} ${wantedCurrency}`
    })
}

//prevent whitespace input
input.addEventListener('keypress', function(e) {
  var key = e.keyCode;
  if (key === 32) {
    e.preventDefault();
  }
});

CodePudding user response：

I think you are overthinking this

const display = data => { 
  const opts = Object.entries(data).map(([key,val]) => `<option value="${key}">${val}</option>`).join("")
  document.getElementById("from").innerHTML  = opts;
  document.getElementById("to").innerHTML  = opts;
}

fetch("https://api.frankfurter.app/currencies")
  .then(data => data.json())
  .then(data => display(data))

<select id="from">
  <option value="">Please select</option>
</select>
<select id="to">
  <option value="">Please select</option>
</select>

CodePudding user response：

Debug to observe your data. That will show you how to use that data.

You are using Object.entries to turn the object into an array and output a specific value. For example:

var data = {"AUD":"Australian Dollar","BGN":"Bulgarian Lev","BRL":"Brazilian Real","CAD":"Canadian Dollar"};

const currencies = (Object.entries(data));

for (let i = 0; i < currencies.length; i  ) {
  console.log(currencies[i][0]);
}

Notice that you are using the first value in each small array. What else does that array contain?:

var data = {"AUD":"Australian Dollar","BGN":"Bulgarian Lev","BRL":"Brazilian Real","CAD":"Canadian Dollar"};

const currencies = (Object.entries(data));

for (let i = 0; i < currencies.length; i  ) {
  console.log(currencies[i]);
}

It contains the abbreviation and the full name. So if you want to use the full name, use the full name:

var data = {"AUD":"Australian Dollar","BGN":"Bulgarian Lev","BRL":"Brazilian Real","CAD":"Canadian Dollar"};

const currencies = (Object.entries(data));

for (let i = 0; i < currencies.length; i  ) {
  console.log(currencies[i][1]);
}

Basically, instead of using index 0, use index 1.