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.kiva         


        

Answer 1

maybe this can help with jsonp:

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

Answer 2

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 />");
     });
   }
}

});

Answer 3

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 4

This is the answer http://forum.jquery.com/topic/jquery-getjson-invalid-label

Simply wrap your Json response with your callback request E.g. jQuery16203473509402899789_1315368234762({"Code":200,"Message":"Place added successfully","Content":""}); where jQuery16203473509402899789_1315368234762 is your callback request (you can get it via querystring) {"Code":200,"Message":"Place added successfully"} is your JSON response

Answer 5

Where does the error occur? Does error occur when you try to loop through the ajax data and append it to the inner_div? If yes, please show us what the data.loans look like.

Also, there is a typo in your code:

            jQuery.each(data.loans, function(i, loan){
                    jQuery("#inner_div").append(loan.name + "<br />"); //It should be loan.name and not laon.name
            });
    },