I am trying to retrieve and display information about current weather from a JSON object using javascript and a URL request:

.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805'

the data from the URL looks like this:

   {
    "data": {
        "current_condition": [
            {
                "cloudcover": "75",
                "humidity": "88",
                "observation_time": "03:30 PM",
                "precipMM": "2.7",
                "pressure": "1008",
                "temp_C": "12",
                "temp_F": "54",
                "visibility": "8",
                "weatherCode": "302",
                "weatherDesc": [
                    {
                        "value": "Moderate rain"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": ".png"
                    }
                ],
                "winddir16Point": "SE",
                "winddirDegree": "140",
                "windspeedKmph": "17",
                "windspeedMiles": "11"
            }
        ],
        "request": [
            {
                "query": "DE3",
                "type": "Postcode"
            }
        ],
        "weather": [
            {
                "date": "2012-05-09",
                "precipMM": "11.8",
                "tempMaxC": "13",
                "tempMaxF": "56",
                "tempMinC": "12",
                "tempMinF": "53",
                "weatherCode": "266",
                "weatherDesc": [
                    {
                        "value": "Light drizzle"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": ".png"
                    }
                ],
                "winddir16Point": "SE",
                "winddirDegree": "141",
                "winddirection": "SE",
                "windspeedKmph": "12",
                "windspeedMiles": "7"
            },
            {
                "date": "2012-05-10",
                "precipMM": "11.1",
                "tempMaxC": "18",
                "tempMaxF": "64",
                "tempMinC": "6",
                "tempMinF": "43",
                "weatherCode": "353",
                "weatherDesc": [
                    {
                        "value": "Light rain shower"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": ".png"
                    }
                ],
                "winddir16Point": "SSW",
                "winddirDegree": "209",
                "winddirection": "SSW",
                "windspeedKmph": "30",
                "windspeedMiles": "19"
            }
        ]
    }
}

I have tried a couple of scripts to try and get the data and take bits out to display in a div. The first one looks like this:

   $.ajax({
    url: ".ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805"
    dataType: 'json',
    success: function(data) {
        jQuery.each(data, function() {
            alert("HELLO");
            alert("Current Cloud Cover = " + this.data.current_condition.cloudcover);
            alert("Current Humidity = " + this.data.current_condition.humidity);
        });
    }
});

the second one looks like this:

var postcode = document.getElementById("address").value;

function getWeather(userName, count) {

   $.getJSON(
     '.ashx?q' + postcode + '&format=json&num_of_days=2&key=ec9c2dc5ba201904120805', 
     {}, 
     showWeather,
    //'jsonp'
  );

}

function showWeather(day) {

    var str = '<ul>';
    str += '<h2>Tweets from ' + postcode + '</h2>';
    var i = 0;
    $.each(day, function(index, value) {
        if (i == count) return;
        var dt = new Date(value.date);
        str += '<p>';
        str += value.temp_C; //gets "text" from JSON
        str += '</p>';
        str += '';
        str += '';
        i++;
    });
}

I want to get the weather information from the JSON URL and display some of the information in a div, can anybody explain how to do this is these two scripts dont work.

I am trying to retrieve and display information about current weather from a JSON object using javascript and a URL request:

http://free.worldweatheronline./feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805'

the data from the URL looks like this:

   {
    "data": {
        "current_condition": [
            {
                "cloudcover": "75",
                "humidity": "88",
                "observation_time": "03:30 PM",
                "precipMM": "2.7",
                "pressure": "1008",
                "temp_C": "12",
                "temp_F": "54",
                "visibility": "8",
                "weatherCode": "302",
                "weatherDesc": [
                    {
                        "value": "Moderate rain"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": "http://www.worldweatheronline./images/wsymbols01_png_64/wsymbol_0018_cloudy_with_heavy_rain.png"
                    }
                ],
                "winddir16Point": "SE",
                "winddirDegree": "140",
                "windspeedKmph": "17",
                "windspeedMiles": "11"
            }
        ],
        "request": [
            {
                "query": "DE3",
                "type": "Postcode"
            }
        ],
        "weather": [
            {
                "date": "2012-05-09",
                "precipMM": "11.8",
                "tempMaxC": "13",
                "tempMaxF": "56",
                "tempMinC": "12",
                "tempMinF": "53",
                "weatherCode": "266",
                "weatherDesc": [
                    {
                        "value": "Light drizzle"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": "http://www.worldweatheronline./images/wsymbols01_png_64/wsymbol_0017_cloudy_with_light_rain.png"
                    }
                ],
                "winddir16Point": "SE",
                "winddirDegree": "141",
                "winddirection": "SE",
                "windspeedKmph": "12",
                "windspeedMiles": "7"
            },
            {
                "date": "2012-05-10",
                "precipMM": "11.1",
                "tempMaxC": "18",
                "tempMaxF": "64",
                "tempMinC": "6",
                "tempMinF": "43",
                "weatherCode": "353",
                "weatherDesc": [
                    {
                        "value": "Light rain shower"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": "http://www.worldweatheronline./images/wsymbols01_png_64/wsymbol_0009_light_rain_showers.png"
                    }
                ],
                "winddir16Point": "SSW",
                "winddirDegree": "209",
                "winddirection": "SSW",
                "windspeedKmph": "30",
                "windspeedMiles": "19"
            }
        ]
    }
}

I have tried a couple of scripts to try and get the data and take bits out to display in a div. The first one looks like this:

   $.ajax({
    url: "http://free.worldweatheronline./feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805"
    dataType: 'json',
    success: function(data) {
        jQuery.each(data, function() {
            alert("HELLO");
            alert("Current Cloud Cover = " + this.data.current_condition.cloudcover);
            alert("Current Humidity = " + this.data.current_condition.humidity);
        });
    }
});

the second one looks like this:

var postcode = document.getElementById("address").value;

function getWeather(userName, count) {

   $.getJSON(
     'http://free.worldweatheronline./feed/weather.ashx?q' + postcode + '&format=json&num_of_days=2&key=ec9c2dc5ba201904120805', 
     {}, 
     showWeather,
    //'jsonp'
  );

}

function showWeather(day) {

    var str = '<ul>';
    str += '<h2>Tweets from ' + postcode + '</h2>';
    var i = 0;
    $.each(day, function(index, value) {
        if (i == count) return;
        var dt = new Date(value.date);
        str += '<p>';
        str += value.temp_C; //gets "text" from JSON
        str += '</p>';
        str += '';
        str += '';
        i++;
    });
}

I want to get the weather information from the JSON URL and display some of the information in a div, can anybody explain how to do this is these two scripts dont work.

• javascript
• jquery
• ajax
• json

• Can you post the error message, if there is one? (The easiest way to see the error is to use Google Chrome, right click the page, select "Inspect Element", and then click on the "Console" tab to bring up a JavaScript console.) I suspect you're getting a cross-site scripting error because you're trying to download data from a different domain. I think you'll need to do some server-side work to get this to work. – Scott Commented May 9, 2012 at 16:29
• Thansk for the reply, however nothing displays in my console window. – lnelson92 Commented May 9, 2012 at 16:30
• Does the alert("Hello") get produced in your first attempt? – Brant Olsen Commented May 9, 2012 at 16:31
• Your showWeather() function never actually returns or echos any code - perhaps (in the second example, using getJSON), the code works fine but you are never doing anything with it? – Dutchie432 Commented May 9, 2012 at 16:35

2 Answers 2

$.ajax({
    url: "http://free.worldweatheronline./feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805",
    dataType: 'jsonp',  // You  need to use 'jsonp' here because it is cross domain request 
    success: function(data) {
        $.each(data, function(index, value) {
            alert(value.current_condition[0].cloudcover);
            alert(value.current_condition[0].humidity);
            alert(value.current_condition[0].weatherDesc[0].value);
            alert(value.request[0].query);
            alert(value.request[0].query);
            $.each(value.weather, function(i, val) {
                alert(val.precipMM);
                alert(val.weatherDesc[0].value);
            })
        });
    }
});

DEMO

There are a few problems... the following should work (modification of the first block of code).

$.ajax({
    url: "http://free.worldweatheronline./feed/weather.ashx?q=de39ga&format=json&num_of_days=2&key=ec9c2dc5ba201904120805&callback=?",
    dataType: 'jsonp',
    success: function(data){
        jQuery.each(data, function(){
            alert(JSON.stringify(this));
            alert("Current Cloud Cover = " + this.current_condition[0].cloudcover);
            alert("Current Humidity = " + this.current_condition[0].humidity);
        });
    }
});

To recap:

1. You need to use JsonP to circumvent cross-site-scripting restrictions (do that by adding "&callback=?" to the AJAX URL.
2. The root of the JSON response is data, so you need to write data.data.
3. The current_condition property is an array-- have to add an indexer (ie, [0]) to access it.