JQuery: getJSON + SunlightLabs API requested

Question

I'm having trouble highlighting a specific element from an API call using the jQuery getJSON function. I am trying to use the SunlightLab Congress API to get specific information about legislators. In the example below, I am trying to pull out the legislator's site:

$.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 code above, the first warning appears, but the second warning does not even occur. I understand that getJSON should use JSONP in this instance, and I think I configured it correctly by ending my url with & jsonp =? '.

Putting the url into my getJSON function in a web browser gives me the following:

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

I tossed a little '?' is shown at the beginning of this, but if the first warning appears, the request should succeed ...

Answer 1

Does the URL you use determine that the JSONP callback should be equal ? what does it mean inputting a javascript function named ? with an argument to a JavaScript object. This is not true. Thus, the request succeeds, but the wrapper function that you defined is not called (and is invalid).

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

One way (automatically) to run JSONP support in jQuery is to switch a key called a "callback" so that it passes jQuery that you are making a JSONP call. those. callback=callback .

EDIT . As Drackir points out, jQuery provides a parameter in $.ajax , allowing him to define his own callback, but you need to tell him that his JSONP call by setting dataType: 'jsonp' to the $.ajax .

Answer 2

Is there a question icon because you specified a JSONP callback function? in the query string (i.e. &jsonp=? ). Due to security issues (in particular, policies of the same origin ), you cannot complete an AJAX request to a site outside the same domain as the page on which you are located. To get around this, JSONP works by creating a script tag, with SRC set to the script url on another site. This will load the external JavaScript file and run any code. Now, to associate this external code with your JavaScript, the external API accepts the name of the function to call ( &jsonp=functionnametocall ). The returned JavaScript calls this function and passes the data that it tries 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 pass the question mark to the jsonp query string parameter. jQuery automatically converts the question mark into a url like http://www.test.com/api/apikey=292929&callback=? , into a function with a unique name. This is handled in the background by jQuery, so you don't need to think about it.

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

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

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

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

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

Answer 3

OK, OK, so this was a pretty simple fix by adding a line for example @Drackir. The invalid part was "cache: true" in 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 the cache is needed in this case: true. Thanks for the help.