Question

我得到＆＃34;无法阅读财产＆＃39; 0＆＃39;未定义＆＃34;错误。我无法找到问题。我认为javascript文件有问题但我无法看到。我写了两次脚本但仍然有js文件有问题。

HTML文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>FreeCodeCamp - Local Weather</title>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="main" class="text-center container">
    <h1>FreeCodeCamp - Weather App</h1>
    <div class="row" id="fade">
        <div style="margin-top: 200px;">
            <span id="city"></span>
            <span id="country"></span>
            <div id="weather"><img id="w-icon"><span id="temp"></span></div>
            <span id="description"></span>
        </div>
    </div>
    <div id="author">
        <span> Created by Kaan Karaca</span><br>
        <span><a href="http://github.com/h4yfans">@GitHub</a> </span><br>
        <span><a href="https://www.freecodecamp.com/h4yfans">@FreeCodeCamp</a> </span>
    </div>

</div>
</body>
</html>

JavaScript文件

$(document).ready(function () {
var cityId;
var city;
var unitsFormat = "metric";

var getWeatherInfo = function () {
    $.getJSON("http://api.sypexgeo.net/json")
        .done(function (locationData) {
            cityId = locationData.city.id;
            cityName = locationData.country.iso;

            $.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
                id: cityId,
                units: unitsFormat,
                APPID: '610ae7b6406da76bb34ad4bb95cc3673'
            })
                .done(function (weatherDate) {
                    $("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
                    $("#temp").text(Math.round(weatherDate.main.temp) + "°C");
                    $("#city").text(weatherDate.name + ",");
                    $("#country").text(cityName);
                    $("#description").text(weatherDate.weather[0].description);

                });
        });
}

getWeatherInfo();

});

Answer 1

您的代码太信任所有这些调用都能正常工作。

在我的情况下，来自http://api.sypexgeo.net/json的json正确找到了我，但是http://api.openweathermap.org/data/2.5/weather?"对该城市ID没有任何线索。因此它会传回一个json，例如：

{
  "cod": "404",
  "message": "Error: Not found city"
}

这显然缺少数组weather，所以js抛出一个未定义的。

解决方案是从天气api（和位置，当你在它）获取规格并检查响应代码是否良好。（我猜测“200”是好的。我从未得到成功案例。）

$(document).ready(function() {
  var cityId;
  var city;
  var unitsFormat = "metric";

  var getWeatherInfo = function() {
    $.getJSON("http://api.sypexgeo.net/json")
      .done(function(locationData) {
        cityId = locationData.city.id;
        cityName = locationData.country.iso;

        $.getJSON("http://api.openweathermap.org/data/2.5/weather?", {
            id: cityId,
            units: unitsFormat,
            APPID: '610ae7b6406da76bb34ad4bb95cc3673'
          })
          .done(function(weatherDate) {
            if (weatherDate.cod != "200") {
              console.log(weatherDate);
              console.log("Couldn't find the weather!!!");
              return;
            }
            $("#w-icon").attr("src", "http://openweathermap.org/img/w/" + weatherDate.weather[0].icon + ".png");
            $("#temp").text(Math.round(weatherDate.main.temp) + "°C");
            $("#city").text(weatherDate.name + ",");
            $("#country").text(cityName);
            $("#description").text(weatherDate.weather[0].description);

          });
      });
  }

  getWeatherInfo();

});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp - Local Weather</title>
  <script src="//code.jquery.com/jquery-3.0.0.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div id="main" class="text-center container">
    <h1>FreeCodeCamp - Weather App</h1>
    <div class="row" id="fade">
      <div style="margin-top: 200px;">
        <span id="city"></span>
        <span id="country"></span>
        <div id="weather">
          <img id="w-icon"><span id="temp"></span>
        </div>
        <span id="description"></span>
      </div>
    </div>
    <div id="author">
      <span> Created by Kaan Karaca</span>
      <br>
      <span><a href="http://github.com/h4yfans">@GitHub</a> </span>
      <br>
      <span><a href="https://www.freecodecamp.com/h4yfans">@FreeCodeCamp</a> </span>
    </div>

  </div>
</body>

</html>

无法阅读财产＆＃39; 0＆＃39;未定义的

1 个答案: