无法使用JSON从Open Weather Map api中提取一项数据

时间:2016-07-06 14:53:18

标签: 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>

2 个答案:

答案 0 :(得分: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
}

答案 1 :(得分:0)

好的,以下工作在CodePen外面。如果我在CodePen中使用它,它会以某种方式阻止JSON调用。如果我在Chrome中使用NotePad编写的版本运行它,它会返回“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>