1

Based on help obtained from@rkosegi , I tried to run my page and javascript through js.fiddle to test and cannot get any result to show on the test page. I get no errors when I run the page inspect in MS Edge.

I checked and double checked, but cannot find the error that is preventing the data from showing. What I am I missing?

$.getJSON("https://<username>:<password>@api.meteomatics.com/todayT05:00Z--today+2DT05:00Z:PT24H/wind_speed_10m:kmh/40.014994,-73.811646/json",

  function(data) {
    console.log(data);

    var mtwnsd24 = data.data[0].coordinates[0].dates[1].value;

    $(".mtwnsd24").append(mtwnsd24);
  });
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  <meta charset="utf-8" />
  <title>API TEST</title>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256- 
      WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

  <script src="meteomatics.js"></script>


</head>

<body>

  <p class="mtwnsd24"></p>

</body>
0stone0
  • 34,288
  • 4
  • 39
  • 64
Eric Miller
  • 47
  • 7
  • 1
    When I visit the link, it is asking for authentication. Did you provide authentication, API key or something? – Ajit Kumar Jan 04 '20 at 21:56
  • Sorry, I originally omitted that. I have placed the userID and key back in the script above. – Eric Miller Jan 04 '20 at 22:09
  • You can check request status in *network tab* in *developer console* provided by any browser. – Ajit Kumar Jan 04 '20 at 22:14
  • It looks like the data source does not allow CORS access: Access to XMLHttpRequest at 'https://usr:passwd@api.meteomatics.com/todayT05:00Z--today+2DT05:00Z:PT24H/wind_speed_10m:kmh/40.014994,-73.811646/json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. – Carsten Massmann Jan 04 '20 at 22:20
  • In general, APIs that require an API key do not allow use directly from the browser, because then the user could get your key. You have to call the API from the server. – Barmar Jan 04 '20 at 22:30
  • @cars10m I agree with the CORS issue so I am using MS Edge to avoid that. – Eric Miller Jan 04 '20 at 22:42
  • @EricMiller — Microsoft Edge enforces the same origin policy like any other browser. It would be a massive security hole if it didn't. You need CORS permission. – Quentin Jan 05 '20 at 00:01
  • Thanks all. this API is driving me nuts so I am going try another one. – Eric Miller Jan 05 '20 at 20:31

2 Answers2

0

The API works fine however you can't pass authentication through the URL like you are trying to do, instead set the auth via headers. Using fetch for example will look like:

var headers = new Headers();

headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
fetch("https://api.meteomatics.com/todayT05:00Z--today+2DT05:00Z:PT24H/wind_speed_10m:kmh/40.014994,-73.811646/json", {headers: headers})

As others have mentioned there is a CORS issue so you will need to request the API from a server/proxy. I tried via Postman and successfully got a response from the API after just signing up.

Ash
  • 11,292
  • 4
  • 27
  • 34
-1

Running your snipplet, checking requests: meteomatics.js not found, 404, and fails silently... so maybe it's a remote script and you should complete the url?

<script src="[**COMPLETE URL HERE**]meteomatics.js"></script>

Related to the request itself, maybe you should use JSONP requests, because if no CORS headers are set, then it's the logical alternative. You can enable JSONP adding to the url a callback parameter (check JSONP at https://api.jquery.com/jQuery.getJSON/ )

user1039663
  • 1,230
  • 1
  • 9
  • 15