2016-06-12 12 views
0

私は最近、Yahooが気象サービスAPIを変更し、私が使っていたコードを編集しようとしていたことに気付きました。私はthis code on githubを見つけて今日の天気情報のみを取得しようとしました。limit 5からlimit 1に変数yqlの値が入りましたが、divに何も表示されません。 1より大きい数値(たとえば2)を変更した後でのみ、divは取得したデータを表示します。私は何を間違えたのか、何をする必要があるのか​​分かりません。yahoo weather yql data limit

何か助けや助言をいただければ幸いです。

答えて

0

27行目で、コードは期待される結果配列の各項目をループします。しかし、応答データ(limit 1)に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>

関連する問題