Weather app question. I cant seem to retrieve anything in the console


#1

Through several sources this is the code I came up with. I cant seem to return anything in the console. Can you help.

function geoLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    "Geolocation is not supported by this browser"
  }
}


function showPosition(position) {
  var x = document.getElementById("latitude").innerHTML="Latitude: " + position.coords.latitude;
  var y = document.getElementById("longitude").innerHTML="Longitude: " + position.coords.longitude;
}
var weather =' https://fcc-weather-api.glitch.me/api/current?lat=' + x + '&lon=' + y + '.json';

$.ajax({
  url:weather,
  dataType : "jsonp",
  success: function(data) {
   var desc = data['description'] 
  }
  
});
geoLocation();

#2

A few fixes needed:

  1. The weather URL should not have .json at the end and should not have a space before https
  2. The variables x and y need to be your latitude and longitude, currently they are defined as text strings with the word “Latitude” and “Longitude” in them followed by the values you need.
  3. Your weather URL and the ajax function that uses that URL need to be in your showPosition function where you define x and y or those variables will be out of scope.

Here’s your code with the above fixes implemented - if needed:

Spoiler Code
function geoLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    console.error("Geolocation is not supported by this browser");
  }
}

function showPosition(position) {
  var x = position.coords.latitude;
  var y = position.coords.longitude;
  var weather ='https://fcc-weather-api.glitch.me/api/current?lat=' + x + '&lon=' + y;
  
  document.getElementById("latitude").innerHTML= "Latitude: " + x;
  document.getElementById("longitude").innerHTML= "Longitude: " + y;
  
  $.ajax({
    url: weather,
    dataType: "jsonp",
    success: function(data) {
      console.log(data);
      var desc = data["description"];
    }
  });
}
geoLocation();