无法使用getJSON提取数据(Can't extract data with getJSON)

我正在做freecampcode课程，现在我在当地的weatherapp。

我的问题是每次我尝试使用，我得到的apiLink没有定义。我知道.getJSON部分无法与definedCordinates函数中定义的var连接。

此外，我试图在.getJSON函数上使用直接api链接，但即使我从json得到0输入，我使用console.log（数据）和$（“＃temp”）。文本检查来自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>

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.

最满意答案

问题是因为你的apiLink变量是在definedCordinates()函数中定义的，它远远超出了document.ready处理程序的范围。

要解决此问题，您需要重构逻辑，以便通过在异步方法上使用适当的回调来使apiLink请求可以使用apiLink 。试试这个：

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

另请注意， apiLink应该是绝对URL，即。它需要一个http://或https://前缀。

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:

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

更多推荐