JSONP callback fails, need help with javascript/jquery

Question

Hi, 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

Answer 1

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.

Answer 2

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.

Answer 3

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")....