CODEWITHSUNDEEP
jquery
Ryan
Ryan

Reputation: 1432

Issue updating object properties

The lon and lat values are supposed to update with a call to the browser's geolocation service. Console.log statements reveal that geolocation is working just fine in the if/else block, but coords.lon and coords.lat are not updating. Could this be a scope issue? Thoughts?

$(document).ready(function () {
// object to hold user coordinates
    var coords = {
      lat: 0,
      lon: 0
    };

// retrieve and set user's latitude and longitude coordinates
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition( function (position) {
            coords.lon = position.coords.longitude;
            coords.lat = position.coords.latitude;
        });
    } else {
        alert("Sorry, I couldn't locate you. Here's the weather in Paris, France.");
        coords.lon = 48.8566;
        coords.lat = 2.3522;
    }

// enumerate AJAX request settings & pass in coordinate settings
    var ajaxOptions = {
        crossDomain:true,
        dataType:"json",
        url:"https://fcc-weather-api.glitch.me/api/current?",
        data: {
            lon:coords.lon,
            lat:coords.lat
        },
        method:"GET",
        success: function (json) {
            $("#description").html(JSON.stringify(json));
            alert(coords.lat);
        },
        error: function () {
            alert("Ajax request failed");
        }
    };

// make AJAX request by passing in options specified in object above
    $.ajax(ajaxOptions);

Upvotes: 0

Views: 23

Answers (1)

charlietfl
charlietfl

Reputation: 171679

getCurrentPosition() is asynchronous. You are trying to use data to make ajax request before it has been received. Make the ajax request inside the getCurrentPosition callback where you know you have the data...or in the else when geolocation not available

To make it cleaner to read will wrap the ajax in a function that can be called from there

// default coordinates - Paris
let coords = {
  lon: 48.8566,
  lat: 2.3522
}

// retrieve and set user's latitude and longitude coordinates
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    coords.lon = position.coords.longitude;
    coords.lat = position.coords.latitude;
    // do request with user location coords
    doAjax(coords);

  });
} else {
  alert("Sorry, I couldn't locate you. Here's the weather in Paris, France.");
  // do request using default coords
  doAjax(coords);
}


function doAjax(coords) {
  // enumerate AJAX request settings & pass in coordinate settings
  var ajaxOptions = {
    crossDomain: true,
    dataType: "json",
    url: "https://fcc-weather-api.glitch.me/api/current?",
    data: {
      lon: coords.lon,
      lat: coords.lat
    },
    method: "GET",
    success: function(json) {
      $("#description").html(JSON.stringify(json));
      alert(coords.lat);
    },
    error: function() {
      alert("Ajax request failed");
    }
  };

  // make AJAX request by passing in options specified in object above
  $.ajax(ajaxOptions);
}

Upvotes: 1

Related Questions