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();

});

Possible duplicate of [Detecting an undefined object property](http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) — cnorthfield, Jun 18 '16 at 23:45
Are you sure about `weatherDate.weather[0].description`? If you use `console.log(weatherDate);` what it shows? — Washington Guedes, Jun 18 '16 at 23:46
Did you use the debugger (or even console log) to make sure that `weatherDate` holds the values you *think* it holds? You should make sure you post the actual value returned by the ajax call. You *code* can be right but your *data* can be wrong. — Jeremy J Starcher, Jun 18 '16 at 23:47
`.done(function (weatherDate, status, jqxhr) { console.log(jqxhr.responseText) });` — , Jun 19 '16 at 00:37

score 0 · Answer 1 · answered Jun 19 '16 at 00:09

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 code as it is actually works for me, I think the problem is with jquery library not loaded properly, the error is indeed that the DOM is undefined for the script — iomv, Jun 19 '16 at 00:18
3 hours ago API was working. Now, same code and doesn't work. http://openweathermap.org/current I used this API. — Kaan Karaca, Jun 19 '16 at 00:21
If the issue had been the error code response, then it would have errored on `weatherDate.main.temp`. You're just not passing the API key when you make the request. — , Jun 19 '16 at 00:27
@MarcoValente: If jQuery wasn't loaded properly, the call would never be made and the DOM shouldn't have anything to do with this error. — , Jun 19 '16 at 00:28
@KaanKaraca: You just need to debug your code. Look at the docs for `$.getJSON`. The callback defines a `jqxhr` object that lets you see the actual response text via `jqxhr.responseText`. http://api.jquery.com/jQuery.ajax/#jqXHR — , Jun 19 '16 at 00:30
jQuery loads (barring a problem OP didn't mention); it's in the header and the code uses the on doc ready. If it's an API key/limiter issue, I didn't run into it. The problem I found, which matches @Keen-Karaca, is the response may not be valid (which the api response code still calls a 200 success. Not a great API). If any of the responses in either of the 2 ajax calls is wrong, the code can break on a different JSON than its expecting. You can find this problem in the raw responseText too, but you don't need to. — user01, Jun 19 '16 at 03:21

Cannot read property '0' of undefined

1 Answers1