Display JSON response

[Nichols Family]

I need help, I need to display the fcttext onto my SharePoint site. the URL for the JSON is http://api.wunderground.com/api/Your_Key/forecast/q/CA/San_Francisco.json and below is a example of there data. I already have my own API key. Please help.

Response {
“response”: {
“version”: “0.1”,
“termsofService”: “http://www.wunderground.com/weather/api/d/terms.html”,
“features”: {
“forecast”: 1
}
},
“forecast”: {
“txt_forecast”: {
“date”: “2:00 PM PDT”,
“forecastday”: [{
“period”: 0,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Tuesday”,
“fcttext”: “Partly cloudy in the morning, then clear. High of 68F. Breezy. Winds from the West at 10 to 25 mph.”,
“fcttext_metric”: “Partly cloudy in the morning, then clear. High of 20C. Windy. Winds from the West at 20 to 35 km/h.”,
“pop”: “0”
}, {
“period”: 1,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Tuesday Night”,
“fcttext”: “Mostly cloudy. Fog overnight. Low of 50F. Winds from the WSW at 5 to 15 mph.”,
“fcttext_metric”: “Mostly cloudy. Fog overnight. Low of 10C. Breezy. Winds from the WSW 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”: “Wednesday”,
“fcttext”: “Mostly cloudy. Fog early. High of 72F. Winds from the WSW at 10 to 15 mph.”,
“fcttext_metric”: “Mostly cloudy. Fog early. High of 22C. Breezy. Winds from the WSW at 15 to 20 km/h.”,
“pop”: “0”
}, {
“period”: 3,
“icon”: “mostlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/mostlycloudy.gif”,
“title”: “Wednesday Night”,
“fcttext”: “Overcast. Fog overnight. Low of 54F. Winds from the WSW at 5 to 15 mph.”,
“fcttext_metric”: “Overcast. Fog overnight. Low of 12C. Breezy. Winds from the WSW at 10 to 20 km/h.”,
“pop”: “0”
}, {
“period”: 4,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Thursday”,
“fcttext”: “Overcast in the morning, then partly cloudy. Fog early. High of 72F. Winds from the WSW at 10 to 15 mph.”,
“fcttext_metric”: “Overcast in the morning, then partly cloudy. Fog early. High of 22C. Breezy. Winds from the WSW at 15 to 25 km/h.”,
“pop”: “0”
}, {
“period”: 5,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Thursday Night”,
“fcttext”: “Partly cloudy in the evening, then overcast. Fog overnight. Low of 54F. Winds from the WNW at 5 to 15 mph.”,
“fcttext_metric”: “Partly cloudy in the evening, then overcast. Fog overnight. Low of 12C. Breezy. Winds from the WNW at 10 to 20 km/h.”,
“pop”: “0”
}, {
“period”: 6,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Friday”,
“fcttext”: “Overcast in the morning, then partly cloudy. Fog early. High of 68F. Winds from the West at 5 to 15 mph.”,
“fcttext_metric”: “Overcast in the morning, then partly cloudy. Fog early. High of 20C. Breezy. Winds from the West at 10 to 20 km/h.”,
“pop”: “0”
}, {
“period”: 7,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.gif”,
“title”: “Friday Night”,
“fcttext”: “Mostly cloudy. Fog overnight. Low of 52F. Winds from the West at 5 to 10 mph.”,
“fcttext_metric”: “Mostly cloudy. Fog overnight. Low of 11C. Winds from the West at 10 to 15 km/h.”,
“pop”: “0”
}]
},
“simpleforecast”: {
“forecastday”: [{
“date”: {
“epoch”: “1340776800”,
“pretty”: “11:00 PM PDT on June 26, 2012”,
“day”: 26,
“month”: 6,
“year”: 2012,
“yday”: 177,
“hour”: 23,
“min”: “00”,
“sec”: 0,
“isdst”: “1”,
“monthname”: “June”,
“weekday_short”: “Tue”,
“weekday”: “Tuesday”,
“ampm”: “PM”,
“tz_short”: “PDT”,
“tz_long”: “America/Los_Angeles”
},
“period”: 1,
“high”: {
“fahrenheit”: “68”,
“celsius”: “20”
},
“low”: {
“fahrenheit”: “50”,
“celsius”: “10”
},
“conditions”: “Partly Cloudy”,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.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”: 21,
“kph”: 34,
“dir”: “West”,
“degrees”: 272
},
“avewind”: {
“mph”: 17,
“kph”: 27,
“dir”: “West”,
“degrees”: 272
},
“avehumidity”: 72,
“maxhumidity”: 94,
“minhumidity”: 58
}, {
“date”: {
“epoch”: “1340863200”,
“pretty”: “11:00 PM PDT on June 27, 2012”,
“day”: 27,
“month”: 6,
“year”: 2012,
“yday”: 178,
“hour”: 23,
“min”: “00”,
“sec”: 0,
“isdst”: “1”,
“monthname”: “June”,
“weekday_short”: “Wed”,
“weekday”: “Wednesday”,
“ampm”: “PM”,
“tz_short”: “PDT”,
“tz_long”: “America/Los_Angeles”
},
“period”: 2,
“high”: {
“fahrenheit”: “72”,
“celsius”: “22”
},
“low”: {
“fahrenheit”: “54”,
“celsius”: “12”
},
“conditions”: “Partly Cloudy”,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.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”: 11,
“kph”: 18,
“dir”: “WSW”,
“degrees”: 255
},
“avewind”: {
“mph”: 9,
“kph”: 14,
“dir”: “WSW”,
“degrees”: 252
},
“avehumidity”: 70,
“maxhumidity”: 84,
“minhumidity”: 54
}, {
“date”: {
“epoch”: “1340949600”,
“pretty”: “11:00 PM PDT on June 28, 2012”,
“day”: 28,
“month”: 6,
“year”: 2012,
“yday”: 179,
“hour”: 23,
“min”: “00”,
“sec”: 0,
“isdst”: “1”,
“monthname”: “June”,
“weekday_short”: “Thu”,
“weekday”: “Thursday”,
“ampm”: “PM”,
“tz_short”: “PDT”,
“tz_long”: “America/Los_Angeles”
},
“period”: 3,
“high”: {
“fahrenheit”: “72”,
“celsius”: “22”
},
“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”: 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”: 14,
“kph”: 22,
“dir”: “West”,
“degrees”: 265
},
“avewind”: {
“mph”: 12,
“kph”: 19,
“dir”: “WSW”,
“degrees”: 256
},
“avehumidity”: 80,
“maxhumidity”: 91,
“minhumidity”: 56
}, {
“date”: {
“epoch”: “1341036000”,
“pretty”: “11:00 PM PDT on June 29, 2012”,
“day”: 29,
“month”: 6,
“year”: 2012,
“yday”: 180,
“hour”: 23,
“min”: “00”,
“sec”: 0,
“isdst”: “1”,
“monthname”: “June”,
“weekday_short”: “Fri”,
“weekday”: “Friday”,
“ampm”: “PM”,
“tz_short”: “PDT”,
“tz_long”: “America/Los_Angeles”
},
“period”: 4,
“high”: {
“fahrenheit”: “68”,
“celsius”: “20”
},
“low”: {
“fahrenheit”: “52”,
“celsius”: “11”
},
“conditions”: “Fog”,
“icon”: “partlycloudy”,
“icon_url”: “http://icons-ak.wxug.com/i/c/k/partlycloudy.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”: 11,
“kph”: 18,
“dir”: “West”,
“degrees”: 267
},
“avewind”: {
“mph”: 10,
“kph”: 16,
“dir”: “West”,
“degrees”: 272
},
“avehumidity”: 79,
“maxhumidity”: 93,
“minhumidity”: 63
}]
}
}
}

[Nichols Family]

Essentially what I need to do is run the following code in a script editor;
$(document).ready(function($){
$.ajax({
url: “http://api.wunderground.com/api/72df18b7f213607b/forecast/q/CO/Alamosa.json”,
dataType : “jsonp”,
success : function(parsed_json) {
var forecast = parsed_json[‘forecast’][‘txt_forecast’][‘forecastday’];

for (index in forecast) {
var newForecastString = ‘Weather forecast for ‘ + forecast[index][‘title’] + ‘ is ‘ + forecast[index][‘fcttext_metric’];
var newForecastParagraph = $(‘<p/>’).text(newForecastString);
$(“.three”).append(newForecastParagraph);
}
}
});
});

And have it display the data like so;

Weather forecast for Sunday is Scattered flurries and snow showers. High -1C. Winds NNW at 15 to 30 km/h. Chance of snow 30%.

Weather forecast for Sunday Night is Some clouds this evening will give way to mainly clear skies overnight. Low -17C. Winds NNW at 15 to 30 km/h.

Weather forecast for Monday is A mainly sunny sky. High 3C. Winds N at 10 to 15 km/h.

Weather forecast for Monday Night is Clear. Low -19C. Winds light and variable.

Weather forecast for Tuesday is Abundant sunshine. High 3C. Winds light and variable.

Weather forecast for Tuesday Night is Clear skies. Low -19C. Winds light and variable.

Weather forecast for Wednesday is Sunny. High 6C. Winds light and variable.

Weather forecast for Wednesday Night is Clear skies. Low -19C. Winds S at 10 to 15 km/h.

Clearly I am awesome at wrapping solutions together.

[Alexander Bautz]

Here is a snippet to get you started:

$.ajax({
    url: "https://api.wunderground.com/api/72df18b7f213607b/forecast/q/CO/Alamosa.json",
    dataType: "jsonp",
    success: function(parsed_json) {
        var forecast = parsed_json['forecast']['txt_forecast']['forecastday'];
		var b = [];
		jQuery.each(forecast,function(i,o){
			b.push("<table cellpadding='2' cellspacing='0'>");
			b.push("<tr>");
			b.push("<td colspan='2' style='font-size:1.3em;font-weight:500;'>"+o.title+"</td>");
			b.push("</tr>");
			b.push("<tr>");
			b.push("<td><img src='"+o.icon_url+"'></td>");
			b.push("<td>"+o.fcttext+"</td>");
			b.push("</tr>");
			b.push("</table>");
			jQuery("#yourPlaceholderID").html(b.join(""));
		});
    }
});

You need to add the ID of your placeholder (the HTML element where you want the result to show) where I have used “yourPlaceholderID”.

Alexander

[Author]

Posts