Display JSON response

Forums Requests Display JSON response

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  Alexander Bautz 1 month ago.

  • Author
    Posts
  • #19409

    Nichols Family
    Participant

    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
    }]
    }
    }
    }

  • #19411

    Nichols Family
    Participant

    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.

  • #19485

    Alexander Bautz
    Keymaster

    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

You must be logged in to reply to this topic.