Unable to call API and receive exchange rates

Question

I am currently learning Java, HTML and CSS so have began making a currency converter to tie these skills together although I am having trouble calling an API and printing the relavant data (exchange rates). Below is my code:

<html>
 <head>
  <title>API Test</title>
 </head>
 <body>
    <script>
    endpoint = 'latest'
    access_key = 'xxx';

// get the most recent exchange rates via the "latest" endpoint:
$.ajax({
    url: 'http://data.fixer.io/api/' + endpoint + '?access_key=' + access_key,   
    dataType: 'jsonp',
    success: function(json) {

        // exchange rata data is stored in json.rates
        alert(json.rates.GBP);

        // base currency is stored in json.base
        alert(json.base);

        // timestamp can be accessed in json.timestamp
        alert(json.timestamp);

    </script>
 </body>
</html>

The following code does not print anything at all and I am unsure as to why this is. The code above is straight from the api documentation although as a beginner I feel I may be missing something obvious. Any help as to why this is happening would be appreciated.

Your code seems to work fine when you include jQuery in the page: http://jsfiddle.net/ymsn9h2g/. — Rory McCrossan, Jun 25 '18 at 12:47
FYI never post your access keys. If they get abused, data leaks or service abuse may occur, and your account could be terminated or blocked. PS they are now also in the Fiddle...! — Peter B, Jun 25 '18 at 12:48
From you code snippet you are missing some closing brackets: one closing brace for success and another for ajax method. So you need to apend this: } }); — im_tsm, Jun 25 '18 at 12:49

score 1 · Accepted Answer · edited Jun 25 '18 at 12:54

@Andy58, seems issue with jquery function closing breakets and might be you forget to include jquery so try with given html

<html>
 <head>
  <title>API Test</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
 </head>
 <body>
    <script>
    endpoint = 'latest'
    access_key = 'xxx';

// get the most recent exchange rates via the "latest" endpoint:
$.ajax({
    url: 'http://data.fixer.io/api/' + endpoint + '?access_key=' + access_key,   
    dataType: 'json',
    success: function(json) {
        alert(json);
        // exchange rata data is stored in json.rates
        alert(json.rates.GBP);

        // base currency is stored in json.base
        alert(json.base);

        // timestamp can be accessed in json.timestamp
        alert(json.timestamp);
      }
      });
    </script>
 </body>
</html>

Unable to call API and receive exchange rates

1 Answers1