Is there a way to integrate the json or xml response from Wunderground's API call into my index.htm?
Here is the api query:
http://api.wunderground.com/api/(your key)/forecast/q/pws:KNCSMITH5.json
And the response:
{
"response": {
"version":"0.1",
"termsofService":"
http://www.wunderground.com/weather/api/d/terms.html",
"features": {
"forecast": 1
}
}
,
"forecast":{
"txt_forecast": {
"date":"11:00 AM EDT",
"forecastday": [
{
"period":0,
"icon":"clear",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/clear.gif",
"title":"Friday",
"fcttext":"Clear in the morning, then partly cloudy. High of 79F. Breezy. Winds from the SW at 10 to 20 mph with gusts to 30 mph.",
"fcttext_metric":"Clear in the morning, then partly cloudy. High of 26C. Windy. Winds from the SW at 20 to 30 km/h with gusts to 45 km/h.",
"pop":"0"
}
,
{
"period":1,
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"title":"Friday Night",
"fcttext":"Partly cloudy. Low of 55F. Winds from the SSW at 5 to 15 mph.",
"fcttext_metric":"Partly cloudy. Low of 13C. Breezy. Winds from the SSW at 10 to 20 km/h.",
"pop":"0"
}
,
{
"period":2,
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"title":"Saturday",
"fcttext":"Partly cloudy. High of 79F. Winds less than 5 mph.",
"fcttext_metric":"Partly cloudy. High of 26C. Winds less than 5 km/h.",
"pop":"0"
}
,
{
"period":3,
"icon":"clear",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/clear.gif",
"title":"Saturday Night",
"fcttext":"Partly cloudy. Fog overnight. Low of 55F. Winds less than 5 mph.",
"fcttext_metric":"Partly cloudy. Fog overnight. Low of 13C. Winds less than 5 km/h.",
"pop":"0"
}
,
{
"period":4,
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"title":"Sunday",
"fcttext":"Partly cloudy. High of 81F. Winds from the SSW at 5 to 15 mph.",
"fcttext_metric":"Partly cloudy. High of 27C. Breezy. Winds from the SSW at 10 to 20 km/h.",
"pop":"10"
}
,
{
"period":5,
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"title":"Sunday Night",
"fcttext":"Partly cloudy. Fog overnight. Low of 54F. Winds from the South at 5 to 10 mph.",
"fcttext_metric":"Partly cloudy. Fog overnight. Low of 12C. Winds from the South at 10 to 15 km/h.",
"pop":"0"
}
,
{
"period":6,
"icon":"mostlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/mostlycloudy.gif",
"title":"Monday",
"fcttext":"Mostly cloudy. High of 75F. Winds from the South at 10 to 15 mph.",
"fcttext_metric":"Mostly cloudy. High of 24C. Breezy. Winds from the South at 20 to 25 km/h.",
"pop":"0"
}
,
{
"period":7,
"icon":"chancerain",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/chancerain.gif",
"title":"Monday Night",
"fcttext":"Mostly cloudy with a chance of rain after midnight. Fog overnight. Low of 57F. Winds from the SSE at 10 to 15 mph. Chance of rain 40% with rainfall amounts near 0.4 in. possible.",
"fcttext_metric":"Mostly cloudy with a chance of rain after midnight. Fog overnight. Low of 14C. Breezy. Winds from the SSE at 15 to 20 km/h. Chance of rain 40% with rainfall amounts near 11.2 mm possible.",
"pop":"40"
}
]
},
"simpleforecast": {
"forecastday": [
{"date":{
"epoch":"1397271600",
"pretty":"11:00 PM EDT on April 11, 2014",
"day":11,
"month":4,
"year":2014,
"yday":100,
"hour":23,
"min":"00",
"sec":0,
"isdst":"1",
"monthname":"April",
"monthname_short":"Apr",
"weekday_short":"Fri",
"weekday":"Friday",
"ampm":"PM",
"tz_short":"EDT",
"tz_long":"America/New_York"
},
"period":1,
"high": {
"fahrenheit":"79",
"celsius":"26"
},
"low": {
"fahrenheit":"55",
"celsius":"13"
},
"conditions":"Clear",
"icon":"clear",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/clear.gif",
"skyicon":"mostlysunny",
"pop":0,
"qpf_allday": {
"in": 0.00,
"mm": 0.0
},
"qpf_day": {
"in": 0.00,
"mm": 0.0
},
"qpf_night": {
"in": 0.00,
"mm": 0.0
},
"snow_allday": {
"in": 0,
"cm": 0
},
"snow_day": {
"in": 0,
"cm": 0
},
"snow_night": {
"in": 0,
"cm": 0
},
"maxwind": {
"mph": 18,
"kph": 29,
"dir": "SW",
"degrees": 220
},
"avewind": {
"mph": 15,
"kph": 24,
"dir": "SW",
"degrees": 219
},
"avehumidity": 52,
"maxhumidity": 73,
"minhumidity": 30
}
,
{"date":{
"epoch":"1397358000",
"pretty":"11:00 PM EDT on April 12, 2014",
"day":12,
"month":4,
"year":2014,
"yday":101,
"hour":23,
"min":"00",
"sec":0,
"isdst":"1",
"monthname":"April",
"monthname_short":"Apr",
"weekday_short":"Sat",
"weekday":"Saturday",
"ampm":"PM",
"tz_short":"EDT",
"tz_long":"America/New_York"
},
"period":2,
"high": {
"fahrenheit":"79",
"celsius":"26"
},
"low": {
"fahrenheit":"55",
"celsius":"13"
},
"conditions":"Partly Cloudy",
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"skyicon":"partlycloudy",
"pop":0,
"qpf_allday": {
"in": 0.00,
"mm": 0.0
},
"qpf_day": {
"in": 0.00,
"mm": 0.0
},
"qpf_night": {
"in": 0.00,
"mm": 0.0
},
"snow_allday": {
"in": 0,
"cm": 0
},
"snow_day": {
"in": 0,
"cm": 0
},
"snow_night": {
"in": 0,
"cm": 0
},
"maxwind": {
"mph": 5,
"kph": 8,
"dir": "SE",
"degrees": 124
},
"avewind": {
"mph": 3,
"kph": 5,
"dir": "SE",
"degrees": 142
},
"avehumidity": 62,
"maxhumidity": 84,
"minhumidity": 42
}
,
{"date":{
"epoch":"1397444400",
"pretty":"11:00 PM EDT on April 13, 2014",
"day":13,
"month":4,
"year":2014,
"yday":102,
"hour":23,
"min":"00",
"sec":0,
"isdst":"1",
"monthname":"April",
"monthname_short":"Apr",
"weekday_short":"Sun",
"weekday":"Sunday",
"ampm":"PM",
"tz_short":"EDT",
"tz_long":"America/New_York"
},
"period":3,
"high": {
"fahrenheit":"81",
"celsius":"27"
},
"low": {
"fahrenheit":"54",
"celsius":"12"
},
"conditions":"Partly Cloudy",
"icon":"partlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/partlycloudy.gif",
"skyicon":"partlycloudy",
"pop":10,
"qpf_allday": {
"in": 0.00,
"mm": 0.0
},
"qpf_day": {
"in": 0.00,
"mm": 0.0
},
"qpf_night": {
"in": 0.00,
"mm": 0.0
},
"snow_allday": {
"in": 0,
"cm": 0
},
"snow_day": {
"in": 0,
"cm": 0
},
"snow_night": {
"in": 0,
"cm": 0
},
"maxwind": {
"mph": 11,
"kph": 18,
"dir": "SSW",
"degrees": 199
},
"avewind": {
"mph": 8,
"kph": 13,
"dir": "SSW",
"degrees": 198
},
"avehumidity": 68,
"maxhumidity": 100,
"minhumidity": 44
}
,
{"date":{
"epoch":"1397530800",
"pretty":"11:00 PM EDT on April 14, 2014",
"day":14,
"month":4,
"year":2014,
"yday":103,
"hour":23,
"min":"00",
"sec":0,
"isdst":"1",
"monthname":"April",
"monthname_short":"Apr",
"weekday_short":"Mon",
"weekday":"Monday",
"ampm":"PM",
"tz_short":"EDT",
"tz_long":"America/New_York"
},
"period":4,
"high": {
"fahrenheit":"75",
"celsius":"24"
},
"low": {
"fahrenheit":"57",
"celsius":"14"
},
"conditions":"Mostly Cloudy",
"icon":"mostlycloudy",
"icon_url":"
http://icons-ak.wxug.com/i/c/k/mostlycloudy.gif",
"skyicon":"mostlycloudy",
"pop":0,
"qpf_allday": {
"in": 0.04,
"mm": 1.0
},
"qpf_day": {
"in": 0.00,
"mm": 0.0
},
"qpf_night": {
"in": 0.44,
"mm": 11.2
},
"snow_allday": {
"in": 0,
"cm": 0
},
"snow_day": {
"in": 0,
"cm": 0
},
"snow_night": {
"in": 0,
"cm": 0
},
"maxwind": {
"mph": 15,
"kph": 24,
"dir": "South",
"degrees": 177
},
"avewind": {
"mph": 13,
"kph": 21,
"dir": "South",
"degrees": 172
},
"avehumidity": 81,
"maxhumidity": 100,
"minhumidity": 60
}
]
}
}
}
Is there any way I can display this as a 3 day forecast?