2016-07-06 49 views
1

全部從開放天氣圖api中拉出一項數據。無法使用JSON

這是一個測試,看看我是否可以連接到開放天氣圖api併成功顯示一個數據項目(現在我只是想獲得給定經緯度的城市名稱)。

順便說一下,我正在CodePen筆內進行此操作。

問題是沒有任何東西出現在網頁上 - 我根本沒有得到任何城市名稱。

這是什麼遺漏? (我模糊了我的API密鑰)

<html><body> 
<div class="Text-center"> 
     <h1> Local Weather</h1> 
     <h3>Front End Dev Project</h3> 
    <ul class ="list-unstyled"> 
     <li class="btn btn-default" id="city"></li> 
    </ul> 
<div> 
</body></html> 


<script> 
$(document).ready(function(){ 

    var long= -77.0506895; 
    var lat = 38.8925157; 
    var api = 'http://api.openweathermap.org/data/2.5/weatherlat='+lat+'&lon'+long+'=&appid=(HIDDEN)'; 

    $.getJSON(api, function(data){ 
     var city = data.name; 
     $("#city").html(city); 
    }); 

}); 

</script> 

回答

0

這是正確的網址,請修改網址

http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid= {的AppKey}

及以下

{ 
    "coord":{ 
     "lon":138.93, 
     "lat":34.97 
    }, 
    "weather":[ 
     { 
     "id":800, 
     "main":"Clear", 
     "description":"clear sky", 
     "icon":"01n" 
     } 
    ], 
    "base":"cmc stations", 
    "main":{ 
     "temp":297.374, 
     "pressure":1018.36, 
     "humidity":93, 
     "temp_min":297.374, 
     "temp_max":297.374, 
     "sea_level":1027.9, 
     "grnd_level":1018.36 
    }, 
    "wind":{ 
     "speed":7.46, 
     "deg":243.504 
    }, 
    "clouds":{ 
     "all":0 
    }, 
    "dt":1467816873, 
    "sys":{ 
     "message":0.0045, 
     "country":"JP", 
     "sunrise":1467747404, 
     "sunset":1467799281 
    }, 
    "id":1851632, 
    "name":"Shuzenji", 
    "cod":200 
} 
+0

謝謝你的迴應。除了我插入密鑰之外,我更改了URL,正如您所說的那樣。然而,城市名稱(「修善寺」)仍未顯示在頁面上。 –

0

OK響應,以下作品在CodePen之外。如果我在CodePen中使用它,它會以某種方式阻止JSON調用。如果我在使用NotePad編寫的版本中運行Chrome,它會返回「Shuzenji」就好。

但這是另一個線程的問題。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var api = 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=52481ca8a499564783f5f082863acac1'; 
    $.getJSON(api, function(data){ 
     var city = data.name; 
     $("#city").html(city); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="Text-center"> 
     <h1> Local Weather</h1> 
     <h3>Front End Dev Project</h3> 
    <ul class ="list-unstyled"> 
     <li class="btn btn-default" id="city"></li> 
    </ul> 
<div> 
</body> 
</html>