Geek Answers Handbook

Try to access stackoverflow api but get parsing error

In an attempt to use apache stackoverflow with ajax and jquery, and I just can't get it to work. I know that I have to use jsonp as a data type, and I keep reading different ways to execute a jsonp request, but I still can't get it to work.

This is my ajax request:

 var API_KEY = "XXXXXXXXXXXX"; var URL = "http://api.stackoverflow.com/1.1/"; var _url = URL + 'users?filter=locrizak'; $.ajax({ dataType:'jsonp', jsonp : false, jsonpCallback : "onJsonp", url: _url, success: function(val) { console.log('success'); //console.log(val); }, error: function(val) { console.log('error'); console.log(arguments); } }); function onJsonp() { console.log(arguments); };

No matter what I try, I always get this answer in firebug:

"parsererror" "onJsonp was not called"

I know that I am doing something really stupid because I faced the same problems when trying to use Twitter Avia, but I can’t remember for the rest of my life what I did to get it to work.

Update

So, I took the working demo of loog @genesis and tried it several times in different ways, but no luck. Then I notice my version of jQuery and switch it to the one that he used, and it magically worked.

I am changing the latest version of http://code.jquery.com/jquery-1.6.2.min.js at http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

hmm no idea why this works, maybe a mistake, but who knows, maybe something has changed.

If anyone knows why it would be great if you could explain. I also understand that jQuery automatically adds a callback, but I could not get it to work like that. What can I do to make this work, I think you would say a “more correct” way?

 var URL = "http://api.stackoverflow.com/1.1/"; api.get(URL + 'users?filter=locrizak'); api.get = function(url) { $.ajax({ /*dataType:'jsonp',*/ dataType:'json', jsonp : false, url: url + '&jsonp=api.onJsonp', success: function(val) { console.log('success'); //console.log(val); }, error: function(val) { //error gets called but....... console.log(arguments); console.log('error'); console.log(val); } }); }; api.onJsonp = function() { //so does the callback!! console.log('called'); console.log(arguments); } //note this code is simplified
+4
source share
4 answers

You can add jsonp:'jsonp', to the ajax() call. The stackoverflow API documentation claims that it needs a jsonp query jsonp , and the jQuery property to configure the passed query string parameter is called jsonp . Without it, callback=? should be added by default at the end of the url.

I get success in the console by running this:

 var URL = "http://api.stackoverflow.com/1.1/"; var _url = URL + 'users?filter=locrizak'; $.ajax({ dataType: 'jsonp', jsonp: 'jsonp', // <--- add this url: _url, success: function(val) { console.log('success'); }, error: function(val) { console.log('error'); console.log(arguments); } });

In addition, jsonp:false, should not set false ; it must be true , otherwise the query string parameter will not be added.

Update:. It works correctly with jQuery v1.6.2 and uses the correct parameters as described in my original answer above. The callback function must be outside the jQuery anonymous function.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JSONP Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $.ajax({ dataType:'jsonp', jsonp: 'jsonp', jsonpCallback: 'onJsonp', url: 'http://api.stackoverflow.com/1.1/users?filter=locrizak', success: function(data) { console.log('success', data); }, error: function(data) { console.log('error', data); } }); }); function onJsonp(data) { console.log('callback', data); }; </script> </head><body></body></html>

Update 2: Based on the comments, here is another version, this time wrapped in an object. Please note: you cannot use jsonpCallback: 'api.onJsonp', , because it is defined only in the anonymous jQuery function. The easiest way to preserve encapsulation is to create a global function and simply transfer control back to the api counterpart.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JSONP Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ api = { get: function(url) { var URL = "http://api.stackoverflow.com/1.1/"; $.ajax({ dataType: 'jsonp', jsonp: 'jsonp', jsonpCallback: 'onJsonp', url: URL + url, success: function(data) { console.log('success', data); }, error: function(data) { console.log('error', data); } }); }, onJsonp: function(data) { console.log('callback', data); } } api.get('users?filter=locrizak'); }); function onJsonp(data) { api.onJsonp(data); } </script> </head><body></body></html>
+1
source

You need to call

http://api.stackoverflow.com/1.1/users?filter=locrizak&jsonp=jsonp

working demo and code:

 <script> var URL = "http://api.stackoverflow.com/1.1/"; var api; api = { get: function(url) { $.ajax({ dataType: 'json', jsonp: false, jsonpCallback: 'api.onJsonp', url: url + '&jsonp=api.onJsonp', }); }, onJsonp: function(val) { $("body").prepend(val.users[0].reputation); console.log('called'); } } api.get(URL + 'users?filter=locrizak'); //note this code is simplified</script>
+2
source

Is onJsonp defined at close? If so, is it possible a problem with a callback by name ('onJsonp') rather than a link?

Two solutions: either define onJsonp in the global scope, or pass it by reference, removing quotes.

+1
source 
 $.ajax({ dataType:'jsonp', jsonp : true, jsonpCallback : "onJsonp", url: _url, success: function(val) { console.log('success'); //console.log(val); }, error: function(val) { console.log('error'); console.log(arguments); } });

set jsonp to true.

0
source

More articles:


All Articles