javascript - Can't extract data with getJSON -
im doing freecampcode curriculum right i'm @ local weatherapp.
my problem here everytime try use, apilink not defined. understand .getjson part can't connect var defined inside definedcordinates function.
also tried use direct api link on .getjson function, 0 input json, im using console.log(data) , $("#temp").text check input 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 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>
the issue because apilink variable defined in definedcordinates() function, out of scope of document.ready handler.
to fix need restructure logic apilink available ajax request using 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 apilink should absolute url, ie. needs http:// or https:// prefix.
Comments
Post a Comment