Question

我正在进行freeCodeCamp本地天气应用程序Zipline挑战，并使用IP-Location API到达我已经提取我的位置的部分，我应该使用Open Weather API的位置来获取有关本地的信息天气。

我已成功完成此操作，并在浏览器（Chrome）的新标签页中打开JSON链接，显示包含我需要的所有对象/数组/信息的JSON等。

但是，如果我尝试将此信息记录到控制台或使用回调信息中的特定信息更改html元素的内容，我什么也得不到。甚至没有任何错误。

我做了一些研究，并尝试在我的codepen上使用http而不是https，但这并没有解决问题。我也尝试过一些Youtube教程，但没有其他人遇到过这个问题。

我已经在代码集中包含了我的所有代码的代码片段（注意：我删除了本地天气应用程序的api密钥）

以下是一些有用的链接： 1.挑战信息本身：https://www.freecodecamp.com/challenges/show-the-local-weather 2.我用来获取我的位置的IP API：http://ip-api.com/ 3.开放天气API：https://openweathermap.org/current#geo

编辑：让我的问题更清楚：为什么我从API获得的信息不会显示在jQuery函数中指定的HTML元素中？

＆＃13;

$(document).ready( function() {
        var city;
        var countryCode;
        
        $.getJSON("http://ip-api.com/json",function(data2){
            city = data2.city; 
            countryCode = data2.countryCode;
            
          var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE";
          $.getJSON(api, function(data3){        
            $("cityName").html(data3.city);
            $("temperature").html(data3.temp);
            $("weather").html(data3.weather[0].description);
          });
      });
  });

＆＃13;

body{
  color:#FFF;
  background-color: #f4495d;
}
.mainContainer{
  margin:7% auto;
  background-color: #ce2336;
  width:50%;
}

h2{
  text-align:center;
  font-size: 180%;
}

p{
  text-align:center;
  font-size: 150%;
}

＆＃13;

<div class="mainContainer">
  <h2>The Local Weather APP</h2>
   <div class="coordinates">
     <p id="data">something something</p>
  </div>
   <div class="one-Third">
     <p id="cityName">YourCity</p>
   </div>
   <div class="one-Third">
     <p id="temperature">TheTemperature</p>
   </div>
   <div class="one-Third">
     <p id="weather">TheWeather</p>
   </div>
   <img src="#">
</div>

＆＃13;

Answer 1

好的，基于评论，你需要填写你正在创建的html，要做到这一点，你必须放置“#”字符以填充特定元素，所以你的代码应该是< / p>

$(document).ready( function() {
    var city;
    var countryCode;

    $.getJSON("http://ip-api.com/json",function(data2){
        city = data2.city; 
        countryCode = data2.countryCode;

      var api = "api.openweathermap.org/data/2.5/weather?q="+city+","+countryCode+"&APPID=MYKEYGOESHERE";
      $.getJSON(api, function(data3){        
        $("#cityName").text(data3.city);
        $("#temperature").text(data3.temp);
        $("#weather").text(data3.weather[0].description);
      });
  });

}）;

FCC /本地天气应用程序/ JSON信息不显示来自OpenWeather API的信息

1 个答案: