Getting elements from JSON into html with jQuery not working

Question

I'm using following code to get some elements out of this JSON, but nothing seems to work. Anybody has an idea of what I'm doing wrong? (I've spent a long time trying to figure it out).

$(document).ready(function() {

$.getJSON('http://free.worldweatheronline.com/feed/weather.ashx?q=Stockholm&format=json&num_of_days=2&key=e8536d3a52101433121710', function(Wdata) {
                $.each(Wdata.data, function() {

                $('<div id="test"></div>').append(

                        this.weather[0].date;

                        ).appendTo('body');

                  });
    });
});

my HTML looks like this:

<!doctype html>
<html lang="se">
    <head>
        <meta charset="utf-8" />
        <title>Title of This Web Page</title>
        <script src="scripts\jquery-1.8.2.js" type="text/javascript"></script>
        <script src="scripts\js.js" type="text/javascript"></script>
    </head>

    <body>
              <div id="test">
              </div>
    </body>

</html>

The JSON looks like this:

{

    "data": {
        "current_condition": [ … ],
        "request": [ … ],
        "weather": [
            {
                "date": "2012-10-17",
                "precipMM": "0.8",
                "tempMaxC": "11",
                "tempMaxF": "51",
                "tempMinC": "8",
                "tempMinF": "46",
                "weatherCode": "119",
                "weatherDesc": [
                    {
                        "value": "Cloudy"
                    }
                ],
                "weatherIconUrl": [
                    {
                        "value": "http://www.worldweatheronline.com/images/wsymbols01_png_64/wsymbol_0003_white_cloud.png"
                    }
                ],
                "winddir16Point": "SW",
                "winddirDegree": "224",
                "winddirection": "SW",
                "windspeedKmph": "27",
                "windspeedMiles": "17"
            },
            { … }
        ]
    }

}

score 0 · Answer 1 · answered Oct 18 '12 at 08:28

Use the JavaScript console. Read the errors it gives you.

Uncaught SyntaxError: Unexpected token ;

Terminate statements, not expressions. Remove the ; from this.weather[0].date;

If you fix that then you get:

XMLHttpRequest cannot load http://free.worldweatheronline.com/feed/weather.ashx?q=Stockholm&format=json&num_of_days=2&key=e8536d3a52101433121710. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

Which is well covered on this site

You open the JavaScript console in your browser. In Chrome it is under Tools>Developer Tools. — Quentin, Oct 18 '12 at 08:48

score 0 · Answer 2 · answered Oct 18 '12 at 08:28

0

If your request os a cross domain = the url is not from your domain you should set the cross domain flag or use jsonp instead.

answered Oct 18 '12 at 08:28

CodeWizard

128,036
21
144
167

How do I set the cross domain flag? – user1755603 Oct 18 '12 at 09:01
read this: http://stackoverflow.com/questions/5750696/how-to-get-a-cross-origin-resource-sharing-cors-post-request-working – CodeWizard Oct 18 '12 at 13:16
This is a tiny plugin that will help you do it https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/ – CodeWizard Oct 18 '12 at 13:17

Getting elements from JSON into html with jQuery not working

2 Answers2