최근 야후가 기상 서비스 API를 변경했으며 내가 사용하고 있던 코드를 수정하려고한다는 사실을 알게되었습니다. 나는 this code on github을 발견했고 오늘의 날씨 정보 만 얻으려고 했으므로 변수 yql의 값으로 limit 5을 limit 1으로 변경했지만 div는 아무 것도 표시하지 않습니다. 내가 1보다 큰 숫자 (예 : 2)를 변경 한 후에 만 div는 검색된 데이터를 표시합니다. 내가 뭘 잘못했는지, 그 밖에 무엇이 필요한지 알 수는 없습니다.야후 날씨 yql 데이터 한도
도움이나 조언을 보내 주시면 감사하겠습니다.
온라인 27에서 코드는 예상 결과 배열의 각 항목을 반복합니다. 그러나 응답 데이터 (limit 1)에 단 하나의 항목 만있는 경우 데이터는 배열이 아니라 객체가되어 루프가 깨집니다.
여기에 대한 빠른 수정입니다 (일부 코드 중복이 존재는하지만 아이디어를 설명) :
<html>
\t <head>
\t \t <title>Weather Example</title>
\t \t <script src="https://code.jquery.com/jquery-2.2.3.min.js"
\t \t \t integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
\t \t \t crossorigin="anonymous">
\t \t </script>
\t \t <style>
\t \t .weather { display: none; margin: 1em; border: 2px solid black; width: 100px; text-align: center; border-radius: 4px; }
\t \t .weather_date { background-color: #000; color: #fff; height: 1.2em; padding: 0.1em; }
\t \t .weather_temp { display: table; width:100%; height: 1.2em; border-bottom: 1px solid black; }
\t \t .weather_temp_min { display: table-cell; background-color: #efe; width: 50%; padding: 0.1em; }
\t \t .weather_temp_max { display: table-cell; background-color: #fee; width: 50%; padding: 0.1em; }
\t \t .weather_text { font-size: 80%; color: #999; padding: 0.5em; }
\t \t </style>
\t </head>
\t <body>
\t \t <script>
\t \t var url = 'https://query.yahooapis.com/v1/public/yql';
\t \t var yql = 'select title, units.temperature, item.forecast from weather.forecast where woeid in (select woeid from geo.places where text="Brisbane, Australia") and u = "C" limit 1| sort(field="item.forecast.date", descending="false");';
\t \t
\t \t var iconUrl = 'https://s.yimg.com/zz/combo?a/i/us/we/52/';
\t \t
\t \t $.ajax({url: url, data: {format: 'json', q: yql}, method: 'GET', dataType: 'json'})
\t \t \t .success(function(data) {
\t \t \t \t if (data.query.count > 1) {
\t \t \t \t \t jQuery.each(data.query.results.channel, function(idx, result) {
\t \t \t \t \t \t console.log(idx);
\t \t \t \t \t \t var f = result.item.forecast;
\t \t \t \t \t \t var u = result.units.temperature;
\t \t \t \t \t \t
\t \t \t \t \t \t var c = $('#weather').clone();
\t \t \t \t \t \t c.find('.weather_date').text(f.date);
\t \t \t \t \t \t c.find('.weather_temp_min').text(f.low + u);
\t \t \t \t \t \t c.find('.weather_temp_max').text(f.high + u);
\t \t \t \t \t \t c.find('.weather_icon').attr('src', iconUrl + f.code + '.gif');
\t \t \t \t \t \t c.find('.weather_text').text(f.text);
\t \t \t \t \t \t
\t \t \t \t \t \t c.css('display', 'inline-block');
\t \t \t \t \t \t
\t \t \t \t \t \t c.appendTo($('body'));
\t \t \t \t \t });
\t \t \t \t } else {
var f = data.query.results.channel.item.forecast;
var u = data.query.results.channel.units.temperature;
var c = $('#weather').clone();
c.find('.weather_date').text(f.date);
c.find('.weather_temp_min').text(f.low + u);
c.find('.weather_temp_max').text(f.high + u);
c.find('.weather_icon').attr('src', iconUrl + f.code + '.gif');
c.find('.weather_text').text(f.text);
c.css('display', 'inline-block');
c.appendTo($('body'));
}
\t \t \t }
\t \t);
\t \t </script>
\t \t
\t \t <!-- Used as a template -->
\t \t <div id="weather" class="weather">
\t \t \t <div class="weather_date">DATE</div>
\t \t \t <div class="weather_temp">
\t \t \t \t <div class="weather_temp_min">MIN</div>
\t \t \t \t <div class="weather_temp_max">MAX</div>
\t \t \t </div>
\t \t \t <img class="weather_icon">
\t \t \t <div class="weather_text"></div>
\t \t </div>
\t \t
\t </body>
</html>