JSONP callback fails, need help with javascript/jquery

Question

I'm a noob at json (know a bit of jquery)....and trying to get a tiny script to work I want to retrieve the time at a certain lat/lng and made up this script in bits from what I've read online:

$.getJSON("http://ws.geonames.org/timezoneJSON?lat=47.01&lng=10.2&callback=?", 

    { 'uID': 1 }, 

    function(data) {
        $.each(data, function(i, item) {
            $("<span/>").html(item.time).html(".nowtime");
        });
    });

Needless to say, it doesn't work...could someone give me a hand with it and also explain what $("").html(item.time).html(".nowtime"); means. (I don't understand what the first is)

Here is the json source reference: http://www.geonames.org/export/web-services.html#timezone

thanks

fire up firebug. where does it fail? sending the request? or in the callback? — geowa4
– geowa4, Commented Jul 21, 2009 at 17:32
nvm i ran it. it fails in the callback. firebug aint to great to debug in, but at least i can be reasonably assured that it's not XSS. — geowa4
– geowa4, Commented Jul 21, 2009 at 17:37

Sinan Taifour · Accepted Answer · 2009-07-21 17:45:14Z

3

I originally thought the problem is most likely in the same origin policy. In order to do an AJAX request to a URL, it must be in the same domain (and port) as the page containing the Javascript code.

But after George IV's correction, I checked it out.

The data object returned in the callback is the JSON-evaled object, and it is not an array. Most likely, your code should've read something like:

$.getJSON("http://ws.geonames.org/timezoneJSON?lat=47.01&lng=10.2&callback=?", 
  { 'uID': 1 }, 
  function(data) {
    $("<span/>").html(data.time); // Or maybe with a different selector (see below)
  }
);

The selector is probably also wrong, You might want, for example, to put the result in a div with an id of test. The line containing the selector in that case should be changed to:

$("#test").html(data.time);

What this is saying is, get the object with id test (the hash sign (#) indicates it is an idea), and update the content with whatever data.time is set to.

edited Jul 21, 2009 at 17:45

answered Jul 21, 2009 at 17:30

Sinan Taifour

10.9k3 gold badges35 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

geowa4 Over a year ago

it better be ok, it's what stackoverflow uses for its flair.

abhishekbh Over a year ago

sweet! works great Sinan....it is so much simpler than what I thought the code would be. I suppose the each statement has to be used when one wishes to output multiple objects? thanks for your help, and you too George IV

Sinan Taifour Over a year ago

Normally, yes. You use each when you are looping through an array, which contains multiple objects. You could use each with an object (like data in the code above), but it is a different use-case; it goes over all of its properties, and you probably won't need that soon (if you are still using JSON for the first time!).

tvanfosson · Accepted Answer · 2009-07-21 17:56:38Z

1

The span code is creating a span element and then setting it's HTML to the returned time value. The code looks wrong, though, as it immediately sets the HTML to ".nowtime" but never actually adds it to the DOM. I'm guessing that the last .html('.nowtime') really should be .addClass('.nowtime') and there should be a .appendTo(???) somewhere in there, but I'm not sure where you should be appending it.

EDIT:

Also, I don't think you need the each function. It appears to be iterating over the members of the data object. You want to just have it use the time property directly.

Example (though, you likely want it added to the DOM elsewhere):

$(function() {
    $.getJSON("http://ws.geonames.org/timezoneJSON?lat=47.01&lng=10.2&callback=?", { 'uID': 1 }, function(data) {
        $("<span/>").html(data.time).appendTo('body');
    });
});

Note: if your the JSONP call were to return an array of objects then you would need to iterate through them with the each method. I don't know enough about the service to know if there are methods that would return an array of objects. This call doesn't, though.

edited Jul 21, 2009 at 17:56

answered Jul 21, 2009 at 17:35

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

1 Comment

geowa4 Over a year ago

We have a winner! I just ran it in firebug and the problem is in using the each. i is the key and item is the value in his case.

Jay · Accepted Answer · 2009-07-21 17:35:41Z

0

You're not very clear on what's wrong. The callback appears to be trying to get the nowtime field and put it in a control on the page. I think this:

$("").html

Should have a selector in the double quotes to tell it where the result goes. Something like $("#myfield")....

answered Jul 21, 2009 at 17:35

Jay

14.5k5 gold badges47 silver badges74 bronze badges

1 Comment

tvanfosson Over a year ago

There's no "nowtime" property. I'm guessing that it's a class that should be applied, but there's not enough code (markup) to tell.

Collectives™ on Stack Overflow

JSONP callback fails, need help with javascript/jquery

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related