$.getJSON and $.ajax fail to return a JSON object

Question

I'm doing the "local weather" front-end development challenge on freecodecamp.com, and I'm having some trouble making an API call to some weather APIs. The challenge revolves around getting the user's location, and then making a call to a weather API to display the weather in their area. I have tried to use Dark Sky API and OpenWeatherMap API, but neither of them return anything. I can put both API links into my browser, and they both display the information I need, but when I put them into my javascript, they fail to return the information. Here is my current attempt with $.ajax and the Dark Sky API:

$(document).ready(function() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
    
      var lat = position.coords.latitude;
      var long = position.coords.longitude;
 
  
    
     //$("#loc").html(lat + " " + long);
 
      $.ajax({
        url: "https://api.darksky.net/forecast/96dd30a49debe62a67b208f705e3d706/" + lat + "," + long,
        success: function(json) {
          $("#loc").html("Your location: " + json.latitude + "," + json.longitude);
          $("#temp").html("Temperature: " + json.currently.temperature);
          $("#fc").html("Test " + json.minutely.summary);
        },
    
        error: function(xhr, status, error) {
          console.log("error", status, xhr, error);
        }    
    });
  });
  }
});

Thanks in advance!

Does your browser's console or network monitor provide any errors or warnings about the request or the script file containing this snippet? — Jonathan Lonowski, Jun 12 '17 at 20:25

score 1 · Answer 1 · answered Jun 12 '17 at 20:14

1

Change the name of your longitude variable. Long is a reserved word in javascript. See this: https://www.w3schools.com/js/js_reserved.asp

answered Jun 12 '17 at 20:14

Simon

764
4
8

Julien Roy · Accepted Answer · 2017-06-12T20:24:01.893

1

This should be a CORS errors

Use dataType: "JSONP" to make it work

A working JSFiddle exemple here

See What is JSONP All about for more info

edited Jun 12 '17 at 20:24

answered Jun 12 '17 at 20:17

Julien Roy

309
3
11

You cannot simply change the request method to JSONP; the server may or may not support it. – Pointy Jun 12 '17 at 20:31
I'm not sure if Pointy is right, but I changed my long variable and added dataType: "JSONP," and my code worked. – audragon Jun 13 '17 at 20:59

score 0 · Answer 3 · answered Jun 12 '17 at 20:39

Please copy and paste this code into your IDE/Text Editor and test it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function() {


  //if (navigator.geolocation) {
    //navigator.geolocation.getCurrentPosition(function (position) {

      //var lat = position.coords.latitude;
        var lat = '27.268416';
      var longTest = '-82.463198';



     //$("#loc").html(lat + " " + long);

      $.ajax({
        url: "https://api.darksky.net/forecast/96dd30a49debe62a67b208f705e3d706/" + lat + "," + longTest,
        dataType: 'JSONP',
        success: function(json) {
          $("#loc").html("Your location: " + json.latitude + "," + json.longitude);
          $("#temp").html("Temperature: " + json.currently.temperature);
          $("#fc").html("Test " + json.minutely.summary);
        },
        success: function(data) {
            console.log(data);
        }, 
        error: function(xhr, status, error) {
          console.log("error", status, xhr, error);
        }    
    });
  //});
  //}
});
</script>

I commented out the the if statement and hard coded some coordinates to test your code. It works. I get an object back. For as long as your if statement executes and your code replaces the values for longitude and latitude, you should be good. Please do not use JS reserved strings.

$.getJSON and $.ajax fail to return a JSON object

3 Answers3