From the MDN Documentation, I can format a currency value with
var locale = 'fr-CA';
var number = 123456.789;
var currency = 'EUR';
console.log(new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(number));
// expected output: "123.456,79 €"
But is it possible to list all available currencies, localized? The point of this question is to build a localized currency selector, without requiring to fetch data from a third party URL or module.
For example :
const localeEl = document.getElementById('locales');
const selectEl = document.getElementById('currencies');
const inputEl = document.getElementById('number');
const outputEl = document.getElementById('output');
// locales already provided from app
const locales = ['fr-CA', 'en-US', 'de-DE'];
// REQUIREMENT: retrieve all known currencies here
const currencies = ['CAD', 'USD', 'EUR'];
locales.forEach(locale => {
const optionEl = document.createElement('option');
optionEl.value = locale;
// OPTIONAL retrieve locale name (localized)
optionEl.text = locale;
localeEl.appendChild(optionEl);
});
currencies.forEach(currency => {
const optionEl = document.createElement('option');
optionEl.value = currency;
// OPTIONAL retrieve localized currency name here
optionEl.text = currency;
selectEl.appendChild(optionEl);
});
const updateOutput = () => {
const locale = localeEl.children[localeEl.selectedIndex].value;
const currency = selectEl.children[selectEl.selectedIndex].value;
const number = inputEl.value;
outputEl.innerHTML = new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(number);
}
localeEl.addEventListener('change', updateOutput);
selectEl.addEventListener('change', updateOutput);
inputEl.addEventListener('change', updateOutput);
<select id="locales"></select>
<select id="currencies"></select>
<input type="number" id="number" />
<div id="output"></div>