Where should I put the json result in money.js?

Question

Reading the documentation http://openexchangerates.github.io/money.js/#fx.rates Its says you need to set up your rates:

 fx.base = "USD";
fx.rates = {
    "EUR" : 0.745101, // eg. 1 USD === 0.745101 EUR
    "GBP" : 0.647710, // etc...
    "HKD" : 7.781919,
    "USD" : 1,        // always include the base rate (1:1)
    /* etc */
}

Which I totally get, only these will then be static rates. It says to have dynamic rates you need to add the json api:

// Load exchange rates data via AJAX:
    $.getJSON(
      // NB: using Open Exchange Rates here, but you can use any source!
      'http://openexchangerates.org/api/latest.json?app_id=[I hid this number]', function(data) {
        // Check money.js has finished loading:
        if (typeof fx !== "undefined" && fx.rates) {
          fx.rates = data.rates;
          fx.base = data.base;
        } else {
          // If not, apply to fxSetup global:
          var fxSetup = {
            rates: data.rates,
            base: data.base
          }
        }
      });

But when I do this the EUR rate doens't change, its still 0.74. The rates don't change or adjust.

Where do I put the json request, before or after the money.js script? or inside the money.js file? if inside the money.js file, where, at the bottom or top? - or please advise where I am going wrong here

Answer 1

You should be able to overload this anywhere once money.js has loaded (javascript allows this in general).

There isn't enough detail to say definitively, but my guess is this is a common race condition because web calls are asynchronous, so if you are doing something like this:

-Load Money js
-Call Web call for rates
-Use money.js

It's likely that when you use money.js, your rate call hasn't returned yet, so when you call it you are using the default values. If this is your issue, you need to put your code in the callback for when you actually set your rates, like so:

$.getJSON(
    // NB: using Open Exchange Rates here, but you can use any source!
    'http://openexchangerates.org/api/latest.json?app_id=[I hid this number]', function(data) {
    // Check money.js has finished loading:
    if (typeof fx !== "undefined" && fx.rates) {
        fx.rates = data.rates;
        fx.base = data.base;
    } else {
        // If not, apply to fxSetup global:
        var fxSetup = {
            rates: data.rates,
            base: data.base
        }
    }
    // YOUR CODE HERE
  });

The documentation actually mentions this:

You'll need to wait until the AJAX request has completed before you can
begin processing conversions. You may also wish to cache
proximate/historical rates on your server and bootstrap them inline
into the HTML as a backup.

Answer 2

https://openexchangerates.org/documentation#example-javascript-ajax-jquery

JavaScript (AJAX / jQuery)

You can easily load the rates into an application or website with JavaScript using an AJAX request. I recommend using jQuery because it'll save you a tonne of headaches, and statistically speaking, you're probably already using it in your page/app:

// Use jQuery.ajax to get the latest exchange rates, with JSONP:
$.ajax({
    url: 'http://openexchangerates.org/api/latest.json?app_id=YOUR_APP_ID',
    dataType: 'jsonp',
    success: function(json) {
        // Rates are in `json.rates`
        // Base currency (USD) is `json.base`
        // UNIX Timestamp when rates were collected is in `json.timestamp`

        // If you're using money.js, do this:
        fx.rates = json.rates;
        fx.base = json.base;
    }
});

Use of JSONP is optional - jQuery will append a callback parameter to the URL, and the response will be wrapped in a function call. This is to prevent access-control (CORS) issues and will save you some headaches in many cases, though for security it's not tip-top (actually, if security is a primary concern in your app, you should proxy the results on your own server to prevent 100% against XSS attacks. Open Exchange Rates will support HTTPS soon, too.

The success callback is asynchronous - meaning that if you have code to be run straight away, which relies on the exchange rates being available, this code should be inside the callback. The rest of your program will keep on executing while that AJAX request is waiting.

---

For emphasis: If you have code to be run straight away, which relies on the exchange rates being available, this code should be inside the callback