无法读取未定义的属性“ 0”
[英]Cannot read property '0' of undefined
问题描述
I get "Cannot read property '0' of undefined" error. 
我收到“无法读取未定义的属性'0'”错误。 I couldn't find the issue. 我找不到问题。 I think javascript file has a problem but I couldn't see. 我认为javascript文件有问题，但我看不到。 I wrote the script twice but still js file has a problem. 我写了两次脚本，但是js文件仍然有问题。
HTML File 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 File 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();
});
1 个解决方案
解决方案1
0 2016-06-19 00:09:51
Your code is too trusting that all these calls will work. 您的代码过于相信所有这些调用都将起作用。
In my case, the json from http://api.sypexgeo.net/json correctly locates me, but http://api.openweathermap.org/data/2.5/weather?" has no clue about that city id. Therefore it passes back a json such as: 就我而言，来自http://api.sypexgeo.net/json的json正确找到了我，但http://api.openweathermap.org/data/2.5/weather?"对该城市ID毫无头绪。因此，传回json，例如：
{
"cod": "404",
"message": "Error: Not found city"
}
This obviously lacks the array weather , so js throws an undefined. 这显然缺少数组weather ，因此js抛出未定义。
The solution would be to get the specs from the weather api (and location, while you're at it) and check that the response code is good. 解决方案是从天气api（以及您所处的位置）获取规格，并检查响应代码是否正确。 (I guessed "200" is good. I never got the success case). （我猜“ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.