2014-01-26 2 views
0

해당 API를 사용하여 OpenWeather 데이터에 액세스하고 있는데 제대로 작동하지 않았습니다. 내가 JSON에 잘못 접근하고 있다고 생각하지만 그것을 깨지 않았다.OpenWeather JSONP

function getWeather(lat, lon, callback) { 
    var weather = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&cnt=1'; 
    $.ajax({ 
     dataType: "jsonp", 
     url: weather, 
     success: callback 
    }); 
}; 

내가 수익률이 실행 쿼리 :

내가 그들의 데이터를 조회하려면 다음 코드 JSFiddle here)를 사용하고 난 다음이 같은 자신의 응답을 포맷하려고

{ 
"coord": 
    { 
    "lon":-6.27,"lat":13.34 
    }, 
"sys": 
    { 
    "message":0.0088, 
    "country":"ML", 
    "sunrise":1390719134, 
    "sunset":1390760592 
    }, 
"weather": 
[ 
    { 
    "id":800,"main":"Clear", 
    "description":"Sky is Clear", 
    "icon":"01n" 
    } 
], 
"base":"cmc stations", 
"main": 
    {"temp":293.154, 
    "temp_min":293.154, 
    "temp_max":293.154, 
    "pressure":989.21, 
    "sea_level":1024.43, 
    "grnd_level":989.21, 
    "humidity":64 
    }, 
"wind": 
    { 
    "speed":4.1, 
    "deg":52.0018 
    }, 
"clouds": 
    { 
    "all":0 
    }, 
"dt":1390695239, 
"id":2451478, 
"name":"Segou", 
"cod":200 
} 

:

var lat = 13.3428; 
var lon = -6.26612; 

    getWeather(lat, lon, function (data) { 
     var tempHTML = ""; 
     tempHTML = tempHTML + '<h3>WEATHER INFO:</h3>'; 
     tempHTML = tempHTML + 'Weather data received <br/>'; 

     tempHTML = tempHTML + '<h3>WEATHER:</h3>'; 
     tempHTML = tempHTML + 'Weather Id: ' + data.weather[0].id + '<br/>'; 
     tempHTML = tempHTML + 'Weather Main: ' + data.weather[0].main + '<br/>'; 
     tempHTML = tempHTML + 'Weather Description: ' + data.weather[0].description + '<br/>'; 
     tempHTML = tempHTML + 'Weather Icon: ' + data.weather[0].icon + '<br/>'; 

     tempHTML = tempHTML + '<h3>MAIN:</h3>'; 
     tempHTML = tempHTML + 'Temperature: ' + data.main[0].temp + 'degrees<br/>'; 
     tempHTML = tempHTML + 'Temperature Min: ' + data.main[0].temp_min + 'degrees<br/>'; 
     tempHTML = tempHTML + 'Temperature Max: ' + data.main[0].temp_max + 'degrees<br/>'; 
     tempHTML = tempHTML + 'Pressure: ' + data.main[0].pressure + 'Kpa<br/>'; 
     tempHTML = tempHTML + 'Humidity: ' + data.main[0].humidity + '%<br/>'; 

     tempHTML = tempHTML + '<h3>WIND:</h3>'; 
     tempHTML = tempHTML + 'Wind Speed: ' + data.wind[0].speed + 'kmh<br/>'; 
     tempHTML = tempHTML + 'Wind Direction: ' + data.wind[0].deg + 'degrees <br/>'; 

     tempHTML = tempHTML + '<h3>CLOUDS:</h3>'; 
     tempHTML = tempHTML + 'Cloud Coverage: ' + data.clouds[0].all + '%<br/>'; 

     document.getElementById('weather_output').innerHTM = tempHTML; 
    }); 

JSFiddle을 보면 콘솔이 있습니다. 의 오류 : 그래서 [0]를 사용하여 객체가 아닌 배열에

Uncaught SyntaxError: Unexpected token : api.openweathermap.org/data/2.5/weather?lat=13.3428&lon=-6.26612&cnt=1&callback=jQuery191009959305939264596_1390699334749&_=1390699334750:1 
Uncaught TypeError: Cannot read property 'temp' of undefined (index):36 
+0

에 있습니다. 또한 일부 속성에 잘못 액세스하고 있습니다. 예를 들어'data.sys [0] .country'가 아닌'data.sys.country'에 액세스해야합니다. 코드 전체에서 이렇게합니다. –

+0

[@ FelixKling] (http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=jsonp). – Andy

+0

@Andy : 음, 오류 메시지'Uncaught SyntaxError : Unexpected token :'이 의미가 없거나 관련이 없습니다. * 편집 : * 흠, 크롬에 바이올린을 처음로드 할 때 JSOP 요청을하지 않았지만, 다시 이상하게 실행하면됩니다. 어쨌든, 나는 첫 번째 코멘트를 삭제할 것이다. –

답변

0

반환 된 JSON 볼 경우, main 키 포인트는 오류가 발생합니다.

대신 사용 data.main.temp ..

같은이 wind, syscloud 특성에 간다 .. 마지막으로

, 당신이 마지막에 innerHTML의 마지막 L 누락 ..

데모 모든 수정 사항은 http://jsfiddle.net/KLtLD/17/

+0

개비, 감사합니다! 나를 위해 또 다른 학습 초크. 도와 줘서 고마워! – TheRealPapa