我编辑了一些jquery天气代码,当我添加一些响应字段时,并非所有字段都清楚结果,我有未定义的结果条件。
示例:Max。温度:42℃/108F最低温度:27℃/80F风:未定义
$(function() { var handlers = {
simplePrint : function (location){
var new_location_div = $('<div>');
new_location_div.addClass('location');
new_location_div.data('l',location.l);
new_location_div.data('city',location.name);
var location_p = $('<p>').text(location.name)
new_location_div.append(location_p);
$('#search_result').append(new_location_div);
},
displayPrint : function (location,day){
var display = $('<div>');
display.addClass('display_on')
location = $('<p>').text('Location: ' + location);
high_temp = $('<p>').text('Max. temp: ' + day.high.celsius + 'C / ' + day.high.fahrenheit + 'F');
min_temp = $('<p>').text('Min. temp: ' + day.low.celsius + 'C / ' + day.low.fahrenheit + 'F');
wind_dir = $('<p>').text(' ' + day.wind_dir +' ');
display.append(location,high_temp,min_temp,wind_dir);
// "Thunderstorm" "Chance of Rain" "Overcast" "Partly Cloudy" "Rain" "Clear"
$('#display_today').slideUp('slow');
var condition = ['clear', 'sunny'].indexOf(day.conditions.toLowerCase())
if (condition === -1 ) {
$('body').fadeTo('slow', 0, function()
{
$(this).css('background-image', 'url("http://harrymoroz.com/wp-content/uploads/2014/04/1_See_It.jpg")');
}).fadeTo('slow', 1);
$('h1').css({'color': 'white'});
$('.starter-template > p').css({'color': 'white'});
}else{
$('body').fadeTo('slow', 0, function()
{
$(this).css('background-image', 'url("https://melodywren.files.wordpress.com/2011/04/p1040585.jpg")');
}).fadeTo('slow', 1);
$('h1').css({'color': 'rgb(#333)'});
$('p').css({'color': 'rgb(#333)'});
};
setTimeout(function(){
$('.display_on').remove();
$('#display_today').append(display);
$('#display_today').slideDown('400');
}, '800'); } } $('#search_form_submit').on('click keypress', function(event) {
event.preventDefault();
var search_query = $('#search_field').val();
if (!search_query) {
$('.location').remove();
return;
};
$.ajax({
url: 'http://autocomplete.wunderground.com/aq?query=' + search_query ,
type: 'GET',
dataType: 'jsonp',
jsonp: 'cb',
})
.done(function(search_api_answer) {
$('.location').remove();
search_api_answer.RESULTS.filter(function(location){
return location.type === 'city'
}).forEach(handlers.simplePrint);
});
$('#search_form').trigger("reset");
});$('#search_result').on('click', '.location', function(event) {
event.preventDefault();
var selected_location = $(this)
var lCode = selected_location.data('l');
$.ajax({
url: 'http://api.wunderground.com/api/0ce1c4a981f7dd2a/conditions/forecast/q/'+ lCode + '.json',
type: 'GET',
dataType: 'json',
// jsonp: 'cb',
})
.done(function(api_city_forecast,conditions) {
todayForecast = api_city_forecast.forecast.simpleforecast.forecastday[0];
cityForecast = selected_location.data('city');
conditions = conditions.current_observation;
handlers.displayPrint(cityForecast,todayForecast,conditions);});});});
查看结果
http://api.wunderground.com/api/0ce1c4a981f7dd2a/conditions/forecast/q/kzn.json
似乎有些项目,如"day"变量,可能并不总是像你期望的那样填写。具体来说,JSON响应中的"day"变量没有"high"或"low"属性——它只有一个值。
你可能想让你的应用迎合这种情况,即当weatherunderground不知道查询的所有值,但提供一个基本值。