Joao Nunes Joao Nunes - 29 days ago 20
JSON Question

Can't extract data with getJSON

Im doing the freecampcode curriculum right now i'm at the local weatherapp.

My problem here is everytime i try to use, i get apiLink is not defined. I understand that the .getJSON part can't connect with the var defined inside the definedCordinates function.

Also i tried to use the direct api link on the .getJSON function, but even with that i get 0 input from json, im using console.log(data) and $("#temp").text to check the input from json.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Local Weather App</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom.css">.
<script type="text/javascript">
$(document).ready(function(){
getCordinates();
$.getJSON(apiLink, function(data){
console.log(data);
})
})

function getCordinates(){
navigator.geolocation.getCurrentPosition(definedCordinates);
}

function definedCordinates(position){
var latitude = Math.floor(position.coords.latitude);
var longitude = Math.floor(position.coords.longitude);
var apiLink = "api.openweathermap.org/data/2.5/weather?lat=" + latitude +"&lon="+ longitude +"&APPID=##########";
return apilink;
}
</script>


<body>
<div class="container-fluid">
<div class="row" id="titleRow">
<div class="col-md-4 col-md-offset-4">
<h1>My Local Weather App</h1>
</div>
</div>
<div class="row" id="locationRow">
<div class="col-md-4 col-md-offset-4">
<div class=row">
<div class="col-md-6" style="background-color: grey">
<p style="text-align:center">icon</p>
</div>
<div class="col-md-6" style="background-color: yellow">
<p style="text-align:center" id="temp">temp</p>
</div>
</div>
</div>
</div>
<div class="row" id="dataRow">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4" style="background-color: grey">
<p id="name"> city name</p>
</div>
<div class="col-md-4" style="background-color: yellow">
<p> sky</p>
</div>
<div class="col-md-4" style="background-color: grey">
<p> wind</p>
</div>
</div>
</div>
</div>
<div class="row" id="poweredBy">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-6" id="powered">
<p> Powered by openweathermap.org API </p>
</div>
<div class="col-md-6"style="background-color: yellow">
<p> button celsius or farh </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer

The issue is because your apiLink variable is defined in the definedCordinates() function, which is well out of scope of the document.ready handler.

To fix this you need to restructure your logic so that the apiLink is available to the AJAX request by using the appropriate callbacks on async methods. Try this:

$(document).ready(function(){
    getCordinates(function(apiLink) {
        $.getJSON(apiLink, function(data) {
            console.log(data);
        })
    });
})

function getCordinates(callback) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = Math.floor(position.coords.latitude);
        var longitude = Math.floor(position.coords.longitude);
        var apiLink = "https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=##########"
        callback && callback(apiLink)
    });
}

Also note that the apiLink should be an absolute URL, ie. it needs a http:// or https:// prefix.