jQuery: getJSON + SunlightLabs API help requested

Question

I'm having trouble pulling a specific element from an API call using jQuery's getJSON function. I'm trying to use SunlightLab's congress API to pull specific info about legislators. In the example below I'm trying to pull a legislator's website:

$.getJSON("http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]&lastname=Weiner&jsonp=?" ,  function(data) {

    alert("hello from sunlight");
    alert(data.response.legislator.website);

}); 

Using the above code, the first alert shows up but the second alert does not even occur. I understand that getJSON should be using JSONP in this instance, and I think I have that set up correctly, ending my URL with '&jsonp=?'.

Putting the URL in my getJSON function into a web browser gives me this:

?({"response": {"legislator": {"website": "http://weiner.house.gov/", "fax": "202-226-7253", ... etc.

I'm a little thrown by the '?' showing up at the beginning of this, but if the first alert is showing up then the request must be succeeding...

Answer 1

The URL you're using is setting the JSONP callback to be equal to ?, which means its injecting a JavaScript function called ? with an argument of a JavaScript object. This is invalid. So, the request is succeeding, but the wrapper function you've defined isn't being called (and isn't valid).

You could change the URL so that its jsonp=callback (or some other handler function name), and then define a function called callback that handles an argument that expects the object.

One way to (automatically) trigger JSONP support in jQuery is to switch the key to be called 'callback' so that it signals to jQuery that you're doing a JSONP call. ie, callback=callback.

EDIT: As Drackir points out, jQuery provides a setting in $.ajax for letting it define it's own callback function name, but you need to signal to it that its a JSONP call by setting dataType: 'jsonp' in the $.ajax call.

Answer 2

The question mark is there because you specified the JSONP callback function to be ? in your query string (ie. &jsonp=?). Due to security concerns (specifically the same-origin policy) you cannot do an AJAX request to a site outside the same domain as the page you're on. To get around this, JSONP works by creating a script tag, with the SRC set to the URL of the script on the other site. This will load the external JavaScript file and run whatever code is there. Now, in order to link that external code with your JavaScript, the external API takes the name of a function to call (&jsonp=functionnametocall). The returned JavaScript calls that function and passes in the data it's trying to return as a JSON object as the first argument.

So, the reason you see the question mark when you go there is because you're passing a question mark to the jsonp query string parameter. jQuery will automatically convert the question mark in a url such as http://www.test.com/api/apikey=292929&callback=? to a uniquely named function. This is handled in the background by jQuery so you don't have to think about it.

Now, that said, I don't know if jQuery detects if the name of the callback parameter as being something other than callback=?. $.getJSON() however is a short form for the longer:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

I suggest you try using $.ajax() directly and set the jsonp setting equal to "jsonp". This tells the $.ajax() method that the query string parameter is called jsonp and not callback. So like this essentially:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback,
  jsonp:"jsonp"
});

More information: $.getJSON | $.ajax()

Answer 3

OK, OK, so it was a rather simple fix, adding a line to the the example given by @Drackir. The missing piece was 'cache: true' within the ajax settings. The final working code looked like this:

$.ajax({
         url: 'http://services.sunlightlabs.com/api/legislators.get.json?apikey=[api key]7&lastname=Weiner',
         dataType: 'jsonp',
         cache: true,
         jsonp: 'jsonp',
         success: function(data) {
             alert("hello from ajax") ;
             alert(data.response.legislator.website);
         }

    });

I'm not sure why 'cache: true' is needed in this case. Thanks for the help.