jQuery: se solicitó la ayuda de la API getJSON + SunlightLabs

Tengo problemas para extraer un elemento específico de una llamada a la API utilizando la función getJSON de jQuery. Estoy tratando de usar la API del congreso de SunlightLab para obtener información específica sobre los legisladores. En el siguiente ejemplo, estoy tratando de sacar el sitio web de un legislador:

$.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); }); 

Usando el código anterior, aparece la primera alerta, pero la segunda alerta ni siquiera ocurre. Entiendo que getJSON debería estar usando JSONP en este caso, y creo que lo tengo configurado correctamente, terminando mi URL con ‘& jsonp =?’.

Poner la URL en mi función getJSON en un navegador web me da esto:

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

Estoy un poco tirado por el ‘?’ Apareciendo al principio de esto, pero si se muestra la primera alerta, entonces la solicitud debe tener éxito …

La URL que está utilizando está configurando la callback JSONP para que sea igual a ? , lo que significa que está inyectando una función JavaScript llamada ? con un argumento de un objeto JavaScript. Esto no es válido. Por lo tanto, la solicitud está teniendo éxito, pero la función de contenedor que ha definido no se llama (y no es válida).

Puede cambiar la URL para que sea jsonp=callback (o algún otro nombre de función de manejador), y luego definir una función llamada callback que maneje un argumento que espera el objeto.

Una forma de (automáticamente) activar el soporte JSONP en jQuery es cambiar la clave para que se llame “callback”, de modo que le indique a jQuery que está haciendo una llamada JSONP. es decir, callback=callback .

EDITAR : como Drackir señala, jQuery proporciona una configuración en $.ajax para permitirle definir su propio nombre de función de callback, pero debe dataType: 'jsonp' que es una llamada JSONP configurando dataType: 'jsonp' en la llamada $.ajax .

El signo de interrogación está allí porque especificó que la función de callback JSONP es? en su cadena de consulta (es decir &jsonp=? ). Debido a problemas de seguridad (específicamente la política del mismo origen ), no puede realizar una solicitud AJAX a un sitio fuera del mismo dominio que la página en la que se encuentra. Para solucionar esto, JSONP funciona creando una etiqueta de script, con el SRC establecido en la URL del script en el otro sitio. Esto cargará el archivo JavaScript externo y ejecutará cualquier código que esté allí. Ahora, para vincular ese código externo con su JavaScript, la API externa toma el nombre de una función para llamar ( &jsonp=functionnametocall ). El JavaScript devuelto llama a esa función y pasa los datos que intenta devolver como un objeto JSON como primer argumento.

Entonces, la razón por la que ve el signo de interrogación cuando va allí es porque está pasando un signo de interrogación al parámetro de cadena de consulta jsonp. jQuery convertirá automáticamente el signo de interrogación en una url como http://www.test.com/api/apikey=292929&callback=? a una función con nombre único. Esto se maneja en segundo plano por jQuery para que no tenga que pensar en ello.

Ahora, dicho esto, no sé si jQuery detecta si el nombre del parámetro de callback es algo distinto de callback=? de callback=? . $.getJSON() sin embargo es una forma corta por más tiempo:

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

Le sugiero que intente usar $.ajax() directamente y establezca la configuración jsonp igual a "jsonp" . Esto le dice al método $.ajax() que el parámetro de cadena de consulta se llama jsonp y no callback . Así es como esencialmente:

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

Más información: $ .getJSON | $ .ajax ()

OK, OK, fue una solución bastante simple, agregando una línea al ejemplo dado por @Drackir. La pieza que faltaba era ‘cache: true’ dentro de la configuración de ajax. El código de trabajo final se veía así:

 $.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); } }); 

No estoy seguro de por qué se necesita ‘cache: true’ en este caso. Gracias por la ayuda.