Cannot read property '0' of undefined
Question
I get "Cannot read property '0' of undefined" error. I couldn't find the issue. I think javascript file has a problem but I couldn't see. I wrote the script twice but still js file has a problem.
HTML File
<!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
$(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 answers
solution1
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:
{
"cod": "404",
"message": "Error: Not found city"
}
This obviously lacks the array weather , so js throws an undefined.
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. (I guessed "200" is good. I never got the success case).
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.