CODEWITHSUNDEEP
jqueryjson
Joseph
Joseph

Reputation: 1744

Getting JSON callback not working

I want to use this api that returns the place matching a zipcode

e.g. for zip 11233

http://postnummersok.se/api?q=11233

I call it with a user input value like this but the result does not parse, how can I troubleshoot, is it even getting the callback? My firebug shows no js errors.

$('#zip').live("keyup",function () {
    var zip = this.value.replace(/ /g,'');
    if(zip.length > 4) {
        var url = 'http://postnummersok.se/api?q=' + zip;
        $.getJSON(url, function(data) {
            $('#result').html(data);
        });
    } else {
         $('#result').html('to short');
    }
});

Upvotes: 1

Views: 5864

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

I assume the document your code is in is not on http://postnummersok.se. If it isn't, you're running into the Same Origin Policy, which doesn't (normally) allow ajax requests to cross origins.

If this is a publicly-available service, they probably support JSON-P, which is not subject to the SOP. jQuery also supports it, so it may be as easy as changing your code from this:

$.getJSON(url, function(data) {
    $('#result').html(data);
});

to this

$.ajax({
    url:      url,
    dataType: "jsonp",
    success:  function(data) {
        $('#result').html(data);
    }
});

More in the $.ajax docs.

Update: Noticed when commenting on another answer that you're dynamically creating a query string, but not encoding the parameter. If zip contains any characters that have to be URL-encoded, your URL will be messed up. Whenever creating query strings, you have to use encodeURIComponent:

var url = 'http://postnummersok.se/api?q=' + encodeURIComponent(zip);

...or just pass an object with key/value pairs to jQuery, which will serialize them correctly for you. Here's what that would look like, modifying my ajax call above:

$.ajax({
    url:      'http://postnummersok.se/api',
    data:     {q: zip},
    dataType: "jsonp",
    success:  function(data) {
        $('#result').html(data);
    }
});

Update 2: I got curious, and yes, you are allowed to use this service, and yes it uses JSON-P. From http://postnummersok.se/:

API

Vi har ett rest-api tillgängligt för alla. Skicka din sökfråga till http://postnummersok.se/api med parametern q som antingen är ett postnummer eller en ort. Svaret kommer som ett JSON-objekt. Callback-parametern heter callback.

...which Google translates as

API

We have a residual-api available to all. Send your query to http://postnummersok.se/api with parameter q which is either a postcode or place. The answer comes as a JSON object. The callback parameter named callback.

However, the service is broken and returning invalid JSON-P replies. If you send it

http://postnummersok.se/api?callback=myCallback&q=721+06

...the response is

myCallback(["V\u00c4STER\u00c5S"])myCallback(null)

...where it should be

myCallback(["V\u00c4STER\u00c5S"])

(Possibly with a ; at the end.)

So I'd drop them a note about the bug if I were you.

Upvotes: 3

Sanghyun Lee
Sanghyun Lee

Reputation: 23002

It's not just a AJAX, but JSONP.

You could do it like this:

$('#zip').live("keyup",function () {
    var zip = this.value.replace(/ /g,'');
    if(zip.length > 4) {
        var url = 'http://postnummersok.se/api?callback=?';
        $.getJSON(url, { q: zip },
            function(data) {
                $('#result').html(data);
        });
    } else {
         $('#result').html('to short');
    }
});

Note that I've added "callback=?" to the URL so jQuery will know it's JSONP, and moved zip to the data parameter of the call. See the docs for details.

Upvotes: 1

Related Questions