How can I output the currency symbol in the final exchanged value?

Question

I was wondering how I could output the different currency symbol which the user wants to covert the amount to in my currency converter? For example, if I wanted to convert £20 to euros in the final output of the new amount which was the euro value of £20 how can I get the euro symbol to be outputted? The final output is only numbers and I want a currency symbol in front of the final value amount output and I was wondering how I could do this for every currency for the output amount. I'm importing the live exchange rates from an API therefore, how can I import the exchange rates but add the currency symbol?

Codepen

JAVASCRIPT

// Fetch exchange rate data from api
$.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
  var currencies = [];
  $.each(data.rates, function(currency, rate) {
    // Currency options dropdown menu
    currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
  });
  $(".currency-list").append(currencies);
})

//Calculate and output the new amount
function exchangeCurrency() {
  var amount = $(".amount").val();
  var rateFrom = $(".currency-list")[0].value;
  var rateTo = $(".currency-list")[1].value;
  if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
    $(".results").html("0");
  } else {
    $(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
  }
}

It doesn't take much of a [*search*](https://www.google.com.au/search?q=HTML+entities+currency+symbol&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1&safe=active&gfe_rd=cr&ei=cSgeWbLfDOzDXvCZgYAC&gws_rd=ssl) to find a list of HTML entities for currency symbols, e.g. [*here*](https://websitebuilders.com/tools/html-codes/currency/). — RobG, May 18 '17 at 23:06

Ananth A · Answer 1 · 2017-05-19T00:05:20.837

2

You can use Localestring

var number = 123456.789;
    
// request a currency format
 console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));   // → 123.456,79 €


var currency = document.getElementById('currency');

var Euro = number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });

currency.innerHTML = Euro;

<p id='currency'></p>

Here is my jsfiddle:

https://jsfiddle.net/646m7905/

edited May 19 '17 at 00:05

answered May 18 '17 at 22:56

Ananth A

331
2
5

Can't seem to get this working do you have a jsfidde? – Liam Docherty May 18 '17 at 23:15
Why post as a fiddle when you can use a runnable snippet here? – RobG May 19 '17 at 00:00
I posted a snippet – Ananth A May 19 '17 at 00:05
@RobG He didn't have a snippet in his original answer. Why don't you help people instead of being a keyboard warrior? – Liam Docherty May 19 '17 at 05:40
@adklkldfadklfaklfdlk—just a simple request. Much easier to access and won't rot like external links have a habit of doing. – RobG May 19 '17 at 05:50

score 0 · Accepted Answer · edited May 23 '17 at 12:02

While you can use toLocaleString where support for the Intl object is available, you can also use a small lookup table (e.g. {euro:'€',pound:'£', ...}) for the symbol and format as money manually.

/* 
https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript/149099#149099
decimal_sep: character used as deciaml separtor, it defaults to '.' when omitted
thousands_sep: char used as thousands separator, it defaults to ',' when omitted
*/
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
{ 
   var n = this,
   c = isNaN(decimals) ? 2 : Math.abs(decimals),
   d = decimal_sep || '.',
   t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
   sign = (n < 0) ? '-' : '',
   i = parseInt(n = Math.abs(n).toFixed(c)) + '', 
   j = ((j = i.length) > 3) ? j % 3 : 0; 
   return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ''); 
}

var currencySymbol = {euro:'&euro;',pound:'&pound;',dollar:'$'};

var amount = 123546.23
document.getElementById('moneyAmount0').innerHTML = currencySymbol.euro + amount.toMoney();
document.getElementById('moneyAmount1').innerHTML = currencySymbol.euro + amount.toMoney(2,',','.');

<p>Amount (English): <span id="moneyAmount0"></span></p>
<p>Amount (European): <span id="moneyAmount1"></span></p>

Note that the result of toLocaleString is still largely implementation dependent, and you don't know what it will fall back to if support for options is not available.

The .toMoney function is from the highest rated answer to How can I format numbers as money in JavaScript?

score 0 · Answer 3 · answered May 19 '17 at 00:56

Do you have a way to get the currency name (i.e. "Euros", "Dollars", "Pounds", etc.)? If so, just do this:

currencySymbols = {euros:'&euro;',dollars:'$',pounds:'&pound;'};
finalText = currencySymbols[currencyText.toLowerCase()] + currencyValue;

That will give you something like $42 or £6.38.

How can I output the currency symbol in the final exchanged value?

3 Answers3