Using jQuery to get json data returns invalid label error

Question

I have this code, and have also tried something similar using the $.getJson function:

jQuery(document).ready(function(){
    var kiva_url = "http://api.kivaws.org/v1/loans/newest.json";

    jQuery.ajax({
        type: "GET",
        url: kiva_url,
            data:"format=json", 
        success: function(data){
            alert("here");
            jQuery.each(data.loans, function(i, loan){
                jQuery("#inner_div").append(loan.name + "<br />");
            });
        },
        dataType: "jsonp",
        error: function(){
            alert("error");
        }
    });

});

When I look in Firebug it is returning an "invalid label" error. I've searched around a bit some people refer to using a parser to parse the results. I can see the results coming back in Firebug. Can someone point to an example of what I should be doing?

The Firebug error:

invalid label http://api.kivaws.org/v1/loans/newest.json?callback=jsonp1249440194660&_=1249440194924&format=json& Line 1

Sample output of what the json looks like can be found here: http://build.kiva.org/docs/data/loans

Answer 1

Well I found the answer...it looks like kiva does not support jsonp which is what jquery is doing here -

http://groups.google.com/group/build-kiva/browse_thread/thread/9e9f9d5df821ff8c

...we don't have plans to support JSONP. Supporting this advocates poor security practices and there are already some good ways to access the data from JavaScript that protect your application and your users. Here's a great article on the subject:

http://yuiblog.com/blog/2007/04/10/json-and-browser-security/

While the risk to Kiva lenders is low now since we are only dealing with public data, allowing private lender data to be imported via script tags is a risk further down the road. Our thought is the risk (and complexity added to create secure applications) is not worth the benefit to developers.

Writing a server-side proxy for the feeds you need is the most common solution to accessing data in browser-based applications. Some other tricks exist using iFrames. The best hope is the new breed of client- based technologies/standards that will let browser-based JavaScript access cross-domain resources securely ( http://dev.w3.org/2006/waf/access-control/ http://json.org/JSONRequest.html ). Some tools like BrowserPlus and Gears let you play with these today, but you won't be able to depend on these in the wild for a while.

As a final note, I'll point out that anyone using JSON responses in JavaScript should either parse JSON explicitly or validate the JSON before taking eval() to it. See here:

http://www.JSON.org/js.html

Linked from the page is a great reference implementation of the proposed ECMAScript JSON parser interface, JSON.parse().

Cheers, skylar

Answer 2

maybe this can help with jsonp:

http://remysharp.com/2007/10/08/what-is-jsonp/

Answer 3

When you return the data, are you returning it with the correct content type and as a method?

You should return your data as follows (php 5 example):

$return = "my_callback_method(" . json_encode( array('data'=>'your data etc') ). ")";

while (@ob_end_clean());
header('Cache-Control: no-cache');
header('Content-type: application/json');
print_r($return);

In your calling javascript code, you must have a method to match the callback method you returned, in this case:

function my_callback_method( returned_data ){
}

So, your complete calling js should look something like the following

jQuery(document).ready(function(){
var kiva_url = "http://api.kivaws.org/v1/loans/newest.json";

jQuery.ajax({
    type: "GET",
    url: kiva_url,
        data:"format=json", 
    dataType: "jsonp",
    error: function(xmlhttp,error_msg){
            alert("error"+error_msg);
    }
});

function my_callback_method( data ){
   alert("here");
   if( data && typeof(data) == 'object') ){
     jQuery.each(data.loans, function(i, loan){
         jQuery("#inner_div").append(loan.name + "<br />");
     });
   }
}

});