Ask your JavaScript questions! Pay money and get answers fast! (more info)

Wunderground API - Need the forecast temp 6 hours after sunrise JavaScript

I'm working on a script that checks some location specific temperature variables for a research project.

The current page lives here:
http://thermo.missouri.edu/weather/

This next piece of the script must find the forecast temperature for 6 hours after sunrise.

The JSON for the forecast looks like this:
http://api.wunderground.com/api/c3bf18d1972e950c/geolookup/astronomy/forecast/history_/hourly/conditions/q/mo/columbia.json


"hourly_forecast": [
{
"FCTTIME": {
"hour": "12","hour_padded": "12","min": "00","sec": "0","year": "2013","mon": "7","mon_padded": "07","mon_abbrev": "Jul","mday": "9","mday_padded": "09","yday": "189","isdst": "1","epoch": "1373389200","pretty": "12:00 PM CDT on July 09, 2013","civil": "12:00 PM","month_name": "July","month_name_abbrev": "Jul","weekday_name": "Tuesday","weekday_name_night": "Tuesday Night","weekday_name_abbrev": "Tue","weekday_name_unlang": "Tuesday","weekday_name_night_unlang": "Tuesday Night","ampm": "PM","tz": "","age": ""
},
"temp": {"english": "89", "metric": "32"},
"dewpoint": {"english": "72", "metric": "22"},
"condition": "Partly Cloudy",
"icon": "partlycloudy",
"icon_url":"http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"fctcode": "2",
"sky": "38",
"wspd": {"english": "10", "metric": "15"},
"wdir": {"dir": "SW", "degrees": "214"},
"wx": "",
"uvi": "3",
"humidity": "55",
"windchill": {"english": "-9998", "metric": "-9998"},
"heatindex": {"english": "95", "metric": "35"},
"feelslike": {"english": "95", "metric": "35"},
"qpf": {"english": "", "metric": ""},
"snow": {"english": "", "metric": ""},
"pop": "10",
"mslp": {"english": "30.02", "metric": "1016"}
}
,


I have a variable called "sixth_hour" that is the sixth hour after sunrise and current_day is the current date.

This is the .each I'm trying to use to acquire the "six_hour_forecast" variable, but I'm not sure I'm structuring it correctly since ['temp']['english'] is not a subset of ['FCTTIME']


// Get the forecast temp 6 hours after sunrise
$.each(parsed_json['hourly_forecast'], function(index, value) {
if(value['FCTTIME']['mday']===current_day*1 ) {
if(value['FCTTIME']['hour']===sixth_hour*1 ) {
var h = value['FCTTIME']['hour']*1;
// set sunrise temp
six_hour_forecast = parsed_json['hourly_forecast'][0]['temp']['english'];
}
}
});


Any help would be A-MAZ-ING.

Answers (2)

2013-07-10

Utkarsh Kukreti answers:

This this code:

$.each(parsed_json['hourly_forecast'], function (index, value) {
if (value['FCTTIME']['mday'] == current_day * 1) {
if (value['FCTTIME']['hour'] == sixth_hour * 1) {
var h = value['FCTTIME']['hour'] * 1;
// set sunrise temp
six_hour_forecast = value['temp']['english'];
}
}
});


Utkarsh Kukreti comments:

Try this code:

$.each(parsed_json['hourly_forecast'], function (index, value) {
if (value['FCTTIME']['mday'] == current_day * 1) {
if (value['FCTTIME']['hour'] == sixth_hour * 1) {
var h = value['FCTTIME']['hour'] * 1;
// set sunrise temp
six_hour_forecast = value['temp']['english'];
}
}
});


charlietriplett comments:

Hey Utkarsh,

I get :
<blockquote>
Uncaught ReferenceError: six_hour_forecast is not defined
</blockquote>
even if I replace current_day and sixth_hour with integers.


charlietriplett comments:

In this case, for Columbia MO, we want the hourly_forecast temp for 11:00 AM for July 10th.

That hour has passed here, so I replace sixth_hour with an integer for a time that hasn't passed yet.
(right now it's 18)
http://thermo.missouri.edu/weather/

2013-07-10

Rainner Lins answers:

Hey, you can try this. It will give you the forecast for hour 11, weather it be this day or the next..
I'm using a local JSON file for data, you can change that to get it from wunderground instead:


$(function()
{
var OUT = "";
var LOCATION = "";
var API = "./columbia.json";

$.getJSON( API, function( data )
{
// update location info
LOCATION = data.location.city + ", " + data.location.state;

// loop hours
$.each( data['hourly_forecast'], function( i, value )
{
// only the hour you need ( 11 AM )
if( parseInt( value.FCTTIME.hour ) == 11 )
{
OUT += "Forecast for ( "+ LOCATION+" ) 6 hours past next sunrise will be: \n";
OUT += value.temp.english + " degrees.";
}
});

alert( OUT );
});
});



You can see a test of this running here:
http://dev.rainnerlins.com/temp/jsquestions/wunderground/


charlietriplett comments:

Close — I need to turn it into a variable just like the previous .each statements in this page


Something like this:


$.each(parsed_json['hourly_forecast'], function( i, value )
{
// only the hour you need ( 11 AM )
if( parseInt( value.FCTTIME.hour ) == 11 )
{
var six_hour_forecast = value.temp.english ;
}
});


Rainner Lins comments:

That shouldn't be a problem, if you're going to use that six_hour_forecast variable outside the jquery scope, you need to define it in the global scope, so you can use it later.


// global scope variable
var six_hour_forecast = "";

// jquery scope
$(function()
{
$.getJSON( "./columbia.json", function( data )
{
$.each( data['hourly_forecast'], function( i, value )
{
if( parseInt( value.FCTTIME.hour ) == 11 )
{
six_hour_forecast = value.temp.english;
}
});
});
});


charlietriplett comments:

This feels really close — is this the correct way to get the API again?

$.getJSON( "http://api.wunderground.com/api/c3bf18d1972e950c/geolookup/forecast/hourly/history_/astronomy/conditions/q/"+lat+","+lon+".json", function( data )


Or can I call it from above the script where it's called the first time?
http://thermo.missouri.edu/weather/

$.ajax({
url : "http://api.wunderground.com/api/c3bf18d1972e950c/geolookup/forecast/hourly/history_/astronomy/conditions/q/"+lat+","+lon+".json",
dataType : "jsonp",
success : function(parsed_json) {


Rainner Lins comments:

Both should work. the getJSON method is a wrapper for .ajax() and uses "json" as the dataType. If that doesn't work, you can add "?callback=?" to the end of the API URL so getJSON will use "jsonp" instead.


http://api.wunderground.com/api/c3bf18d1972e950c/geolookup/forecast/hourly/history_/astronomy/conditions/q/"+lat+","+lon+".json?callback=?


http://api.jquery.com/jQuery.getJSON/


charlietriplett comments:

@Rainner

I really need this literally spelled out for me as code. I'm a Javascript novice. Can this work without calling the API URL again like this as I've done before in http://thermo.missouri.edu/weather/?

$.each( parsed_json['hourly_forecast'], function( i, value ) {
if( parseInt( value.FCTTIME.hour ) == 13 && parseInt( value.FCTTIME.mday ) == 11)
{
six_hour_forecast = value.temp.english;
}
});

Right now this pulls a temp, but not the right temp.

In this case, I would want the temp from <em>this</em> piece of the JSON where the hour = 13 and mday = 11. Right now it does define six_hour_forecast, but it's not the correct temp.


"FCTTIME": {
<strong>"hour": "13"</strong>,"hour_padded": "13","min": "00","sec": "0","year": "2013","mon": "7","mon_padded": "07","mon_abbrev": "Jul",<strong>"mday": "11",</strong>"mday_padded": "11","yday": "191","isdst": "1","epoch": "1373565600","pretty": "1:00 PM CDT on July 11, 2013","civil": "1:00 PM","month_name": "July","month_name_abbrev": "Jul","weekday_name": "Thursday","weekday_name_night": "Thursday Night","weekday_name_abbrev": "Thu","weekday_name_unlang": "Thursday","weekday_name_night_unlang": "Thursday Night","ampm": "PM","tz": "","age": ""
},
<strong>"temp": {"english": "81",</strong> "metric": "27"},
"dewpoint": {"english": "61", "metric": "16"},
"condition": "Clear",
"icon": "clear",
"icon_url":"http://icons-ak.wxug.com/i/c/k/clear.gif",
"fctcode": "1",
"sky": "15",
"wspd": {"english": "8", "metric": "13"},
"wdir": {"dir": "ENE", "degrees": "70"},
"wx": "",
"uvi": "7",
"humidity": "48",
"windchill": {"english": "-9998", "metric": "-9998"},
"heatindex": {"english": "81", "metric": "27"},
"feelslike": {"english": "81", "metric": "27"},
"qpf": {"english": "0.00", "metric": "0.00"},
"snow": {"english": "0.00", "metric": "0.00"},
"pop": "0",
"mslp": {"english": "30.07", "metric": "1018"}
}



Rainner Lins comments:

You don't need to call the API again since you already have the JSON data to work with.
Try this:


if( parseInt( value.FCTTIME.hour ) == 13 && six_hour_forecast === "" )
{
six_hour_forecast = value.temp.english;
}


That will set the value for six_hour_forecast once to avoid rewriting it.
Also, avoid using === to compare numbers, that tries to check data type, as well as value. Just to be safe.


charlietriplett comments:

<blockquote>
You don't need to call the API again since you already have the JSON data to work with.
</blockquote>
Excellent.

This is getting a number, but it's the wrong temp. I need the actual temp from that FCTTIME hour from today.
http://thermo.missouri.edu/weather/