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

Question

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

Answer 1

Just use the object you already have

const host = "https://api.frankfurter.app"
const filledCurrency = document.getElementById("filledCurrency");
const toCurrency = document.getElementById("wantedCurrency");
const before = document.getElementById("before");
const after = document.getElementById("after");
const converted = document.getElementById("converted");
const convertButton = document.getElementById("convert");
let currencies;
const selChange = () => {
  const from = filledCurrency.value;
  const to = wantedCurrency.value;
  const same = from === to;
  const empty = !from || !to;
  converted.textContent = "";
  before.textContent = !empty && same ? "Same currency" : "";
  convertButton.disabled = empty || same;
};

const display = data => {
  currencies = data;
  const opts = Object.entries(currencies)
    .map(([key, val]) => `<option value="${key}">${key}</option>`).join("");
  filledCurrency.innerHTML += opts;
  filledCurrency.addEventListener("change", selChange);
  wantedCurrency.innerHTML += opts;
  wantedCurrency.addEventListener("change", selChange);
}

fetch(`${host}/currencies`)
  .then(data => data.json())
  .then(data => display(data))
const convert = () => {
  selChange();
  before.textContent = after.textContent = "";
  const amount = +fromAmount.value;
  if (!amount) return;
  const from = filledCurrency.value;
  const to = wantedCurrency.value;
  fetch(`${host}/latest?amount=${amount}&from=${from}&to=${to}`)
    .then(value => value.json())
    .then(value => {
      const rate = Object.values(value.rates)[0];
      converted.textContent = `@${rate}`;
      before.textContent = `${amount} ${currencies[from]} EQUALS`
      after.textContent = `${(amount*rate).toFixed(2)} ${currencies[to]}`
    })
};
convertButton.addEventListener("click", convert);

#container {
  display: inline-flex;
  flex-direction: column;
  background-color: teal;
  padding: 10px;
}

.row {
  flex: 1 1 0;
}

#convert {
  width: 100%;
}

<div id="container">
  <div class="row">
    <h3 id="before"> </h3> 
    <h2 id="after"> </h2>
    <span id="converted"></span>
  </div>
  <div class="row">
    <input type="number" id="fromAmount">
    <select id="filledCurrency">
      <option value="">Curr</option>
    </select>
  </div>
  <div class="row">
    <input type="number" id="toAmount">
    <select id="wantedCurrency">
      <option value="">Cur</option>
    </select>
  </div>
  <div class="row">
    <button id="convert" disabled>Convert</button>
  </div>
</div>

Answer 2

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.