정의되지 않은 '0'속성을 읽을 수 없습니다.

"정의되지 않은 '0'속성을 읽을 수 없습니다."오류가 발생합니다. 문제를 찾을 수 없습니다. javascript 파일에 문제가 있다고 생각하지만 잘 보지 못했습니다. 스크립트를 두 번 작성했지만 여전히 js 파일에 문제가 있습니다.정의되지 않은 '0'속성을 읽을 수 없습니다.

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>

자바 스크립트 파일에 코드를 너무 모든 호출이 작동 할 것이라고 믿고있다

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

});

출처

2016-06-18 Kaan Karaca

[정의되지 않은 객체의 속성을 감지]의 사용 가능한 복제 (http://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) – cnorthfield

약 당신이 확실 'weatherDate.weather [0] .description'? 'console.log (weatherDate);를 사용한다면 무엇을 보여줄까요? –

디버거 (또는 콘솔 로그)를 사용하여 'weatherDate'가 보유하고 있다고 생각하는 값을 보유하고 있는지 확인 했습니까? ajax 호출에서 반환 된 실제 값을 게시해야합니다. 당신 * 코드 *는 맞을 수 있지만 당신의 * 데이터 *는 틀릴 수 있습니다. –

제 경우에는 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 미정을 던진다.

해결책은 weather 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>

출처

2016-06-19 00:09:51 user01

코드는 실제로 나를 위해 작동합니다. jquery 라이브러리가 제대로로드되지 않았기 때문에 실제로 DOM은 스크립트에 대해 정의되지 않았습니다. – iomv

3 시간 전 API가 작동했습니다. 자, 같은 코드가 작동하지 않습니다. http://openweathermap.org/current 이 API를 사용했습니다. –

문제가 오류 코드 응답 인 경우 'weatherDate.main.temp'에 오류가 발생했을 것입니다. 요청할 때 API 키를 전달하지 않고있는 것입니다. –

정의되지 않은 '0'속성을 읽을 수 없습니다.

답변

관련 문제