Trying to access stackoverflow api but getting parse error

Question

In trying to use the stackoverflow api with ajax and jquery and I just can't get it to work. I know I have to use jsonp as the datatype and I keep reading different ways of doing the 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 response in firebug:

"parsererror" "onJsonp was not called"

I know that I am doing something really dumb because I ran into the same issues when trying to use the Twitter api but I can't for the life of me remember what I did to get it to work.

Update

So I took a loog @genesis's working demo and tried it a few time and different ways but no luck. Then I notice my jQuery version and switched it to the one he was using and it magically worked.

I change the most recent version http://code.jquery.com/jquery-1.6.2.min.js to http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

hmm no idea why it works, possibly a bug but who knows maybe something else changed.

If anyone knows why it would be awesome if you could explain. Also I realize that jQuery adds the callback automatically but I could not get it working like that. What could I do to get this working, I guess you would say a "more proper" 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

Poor question title. Can you make it describe the question? Your previous question titles are decent. — Lightness Races in Orbit, Jul 22 '11 at 23:31

genesis · Answer 1 · 2011-07-23T00:58:26.060

2

You have 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>

edited Jul 23 '11 at 00:58

answered Jul 22 '11 at 23:31

genesis

50,477
20
96
125

sorry i have a couple closures and this is simplified, fixed it now – locrizak Jul 22 '11 at 23:35
@ShankarSangoli: it wasnt before few seconds – genesis Jul 22 '11 at 23:37
There is a property to configure this on ajax() object. jQuery can automatically add the query string parameter to the end of the URL. – andyb Jul 23 '11 at 00:05
@genesis. Great! I updated my question but it did cause me to have a couple more. – locrizak Jul 23 '11 at 00:43

score 1 · Answer 2 · answered Jul 22 '11 at 23:48

1

Is onJsonp defined within a closure? If so, perhaps the fact you're referring to the callback by name ('onJsonp') instead of by reference is the problem?

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

answered Jul 22 '11 at 23:48

searlea

8,173
4
34
37

I have tried `api.onJsonp`... api being the closure name as well as a global `onJsonp` method. You cannot pass the function name without the quotes, it needs to be a string because it is added onto the request, not called right away. – locrizak Jul 22 '11 at 23:51

andyb · Accepted Answer · 2011-07-23T21:04:57.673

You can add jsonp:'jsonp', to the ajax() call. The stackoverflow API documentation states that it needs the jsonp query paramater and the jQuery property to configure the query string parameter passed is called jsonp. Without it, the default is to add callback=? to the end of the URL.

I get success in the console, 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);
    }
});

Also, jsonp:false, should not be set to false; it needs to be true otherwise no query string parameter is added.

Update: Got it working correctly with jQuery v1.6.2 and using 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 comments, here is another version, this time wrapped in an object. Note that you cannot use jsonpCallback: 'api.onJsonp', because that is only defined inside the jQuery anonymous function. The simplest way to keep the encapsulation is to create a global function and just pass 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>

Beautiful! Only one little problem. I got it to work with a global function. I get success and the `onJsonp` method is called. Once I change `onJsonp` to `api.onJsonp` the callback gets called but the ajax error handler fires. — locrizak, Jul 23 '11 at 14:19
as a baidaid solution to this I put `api.onJsonp.apply(api, arguments);` in the global `onJsonp` function but I would really rather call `api.onJsonp` as the request callback and get a successful response. — locrizak, Jul 23 '11 at 14:47
@locrizak what you want is impossible I think due to the `api.onJsonp` only existing in the jQuery anonymous closure. I have updated my answer with an improved example that should do what you want. — andyb, Jul 23 '11 at 21:06
Yeah thats what I thought just checking if I was missing anything that I should be doing to get it to work. Thanks for your help — locrizak, Jul 24 '11 at 18:15

score 0 · Answer 4 · answered Jul 22 '11 at 23:39

0

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

answered Jul 22 '11 at 23:39

DrStrangeLove

11,227
16
59
72

That does not work. In the jQuery ajax docs it says to set it to the callback function or false if the callback function will add an extra `?=` and in this case it will – locrizak Jul 22 '11 at 23:41

Trying to access stackoverflow api but getting parse error

Update

4 Answers4