【问题标题】:yahoo weather yql data limit雅虎天气yql数据限制
【发布时间】:2016-06-12 13:28:28
【问题描述】:

我最近注意到雅虎对其天气服务 API 进行了更改,并试图编辑我正在使用的代码。我找到了this code on github 并试图只获取今天的天气信息,因此将变量 yql 的值中的limit 5 更改为limit 1,但是 div 不会显示任何内容。只有在我更改大于 1(例如 2)的数字后,div 才会显示检索到的数据。我无法弄清楚我做错了什么以及还需要做什么。

任何帮助或建议将不胜感激。

【问题讨论】:

    标签: html yahoo weather


    【解决方案1】:

    在第 27 行,代码将循环预期结果数组的每一项。但如果响应数据中只有一项(limit 1),则数据将不是数组而是对象,从而打破循环。

    这里有一个快速解决方案(有一些代码重复,但它说明了这个想法):

    <html>
    	<head>
    		<title>Weather Example</title>
    		<script src="https://code.jquery.com/jquery-2.2.3.min.js"
    			integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" 
    			crossorigin="anonymous">
    		</script>
    		<style>
    		.weather { display: none; margin: 1em; border: 2px solid black; width: 100px; text-align: center; border-radius: 4px; }
    		.weather_date { background-color: #000; color: #fff; height: 1.2em; padding: 0.1em; }
    		.weather_temp { display: table; width:100%; height: 1.2em; border-bottom: 1px solid black; }
    		.weather_temp_min { display: table-cell; background-color: #efe; width: 50%; padding: 0.1em; }
    		.weather_temp_max { display: table-cell; background-color: #fee; width: 50%; padding: 0.1em; }
    		.weather_text { font-size: 80%; color: #999; padding: 0.5em; }
    		</style>
    	</head>
    	<body>
    		<script>
    		var url = 'https://query.yahooapis.com/v1/public/yql';
    		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");';
    		
    		var iconUrl = 'https://s.yimg.com/zz/combo?a/i/us/we/52/';
    		
    		$.ajax({url: url, data: {format: 'json', q: yql}, method: 'GET', dataType: 'json'})
    			.success(function(data) {
    				if (data.query.count > 1) {
    					jQuery.each(data.query.results.channel, function(idx, result) {
    						console.log(idx);
    						var f = result.item.forecast;
    						var u = result.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'));
    					});
    				} 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'));
                    }
    			}
    		);
    		</script>
    		
    		<!-- Used as a template -->
    		<div id="weather" class="weather">
    			<div class="weather_date">DATE</div>
    			<div class="weather_temp">
    				<div class="weather_temp_min">MIN</div>
    				<div class="weather_temp_max">MAX</div>
    			</div>
    			<img class="weather_icon">
    			<div class="weather_text"></div>
    		</div>
    		
    	</body>
    </html>

    【讨论】:

      猜你喜欢
      • 2014-02-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-06
      • 2012-08-16
      • 2013-02-09
      • 2014-11-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多