問題の更新オブジェクトのプロパティ

Question

lonおよびlatの値は、ブラウザのジオロケーションサービスを呼び出すと更新されるはずです。 Console.logステートメントでは、if/elseブロックでジオロケーションが正常に機能していることがわかりますが、coords.lonとcoords.latは更新されません。これはスコープの問題でしょうか？思考？

$(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); 

Answer 1

getCurrentPosition()は非同期です。受信する前にデータを使用してajaxリクエストを作成しようとしています。あなたはデータを持っている...かでは使用できませんelseときgeolocationが

そこ

から呼び出すことができる機能でAJAXをラップします読み取るために、それきれいにするためにあなたが知っている getCurrentPositionコールバック内のAJAXリクエストを作ります

// 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); 
}