análisis de JSONP $ http.jsonp () respuesta en angular.js - javascript, angularjs, jsonp

Estoy usando angular "s $http.jsonp() solicitud que devuelve correctamente json envuelto en una función:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).
success(function(data, status, headers, config) {
//what do I do here?
}).
error(function(data, status, headers, config) {
$scope.error = true;
});

¿Cómo acceder / analizar la función devuelta JSON?

Respuestas

293 por respuesta № 1

ACTUALIZACIÓN: desde Angular 1.6

Ya no puede usar la cadena JSON_CALLBACK como marcador de posición para especificando dónde debe ir el valor del parámetro de devolución de llamada

Ahora debe definir la devolución de llamada de esta manera:

$http.jsonp("some/trusted/url", {jsonpCallbackParam: "callback"})

Cambiar / acceder / declarar parámetro vía $http.defaults.jsonpCallbackParampor defecto a callback

Nota: También debe asegurarse de que su URL se agregue a la lista de confianza / lista blanca:

$sceDelegateProvider.resourceUrlWhitelist

o explícitamente confiable a través de:

$sce.trustAsResourceUrl(url)

success/error fueron obsoleto.

los $http métodos de promesa heredados success y error han quedado en desuso y se eliminarán en v1.6.0. Utilice el método estándar de entonces en su lugar. Si $httpProvider.useLegacyPromiseExtensions se establece en false entonces estos métodos arrojarán $http/legacy error.

UTILIZAR:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
var trustedUrl = $sce.trustAsResourceUrl(url);

$http.jsonp(trustedUrl, {jsonpCallbackParam: "callback"})
.then(function(data){
console.log(data.found);
});

Respuesta anterior: Angular 1.5.xy antes

Todo lo que debes hacer es cambiar callback=jsonp_callback a callback=JSON_CALLBACK al igual que:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

Y luego tu .success La función debería activarse como la tiene si la devolución fue exitosa.

Hacerlo de esta manera evita que tengas que ensuciar el espacio global. Esto está documentado en la documentación de AngularJS aquí.

El violín de Matt Ball actualizado para usar este método: http://jsfiddle.net/subhaze/a4Rc2/114/

Ejemplo completo:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)
.success(function(data){
console.log(data.found);
});

---

70 para la respuesta № 2

los COSA MÁS IMPORTANTE No entendí por un tiempo es que la solicitud DEBE contiene "callback = JSON_CALLBACK", porque AngularJS modifica la url de solicitud, sustituyendo un identificador único para "JSON_CALLBACK". La respuesta del servidor debe usar el valor del parámetro "devolución de llamada" en lugar de la codificación rígida "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Como estaba escribiendo mi propio script de servidor PHP, pensé que sabía qué nombre de función quería y no necesitaba "callback = JSON_CALLBACK" en la solicitud. ¡Gran error!

AngularJS reemplaza "JSON_CALLBACK" en la solicitud con un nombre de función único (como "callback = angular.callbacks._0"), y la respuesta del servidor debe devolver ese valor:

angular.callbacks._0(json_response);

---

8 para la respuesta № 3

Esto fue muy útil. Angular no funciona exactamente como JQuery. Tiene su propio método jsonp (), que de hecho requiere "& callback = JSON_CALLBACK" al final de la cadena de consulta. Aquí hay un ejemplo:

var librivoxSearch = angular.module("librivoxSearch", []);
librivoxSearch.controller("librivoxSearchController", function ($scope, $http) {
$http.jsonp("http://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK").success(function (data) {
$scope.data = data;
});
});

Luego muestre o manipule {{data}} en su plantilla Angular.

---

5 para la respuesta № 4

Esto debería funcionar bien para usted, siempre que la función jsonp_callback es visible en el alcance global:

function jsonp_callback(data) {
// returning from async callbacks is (generally) meaningless
console.log(data.found);
}

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url);

Demostración completa: http://jsfiddle.net/mattball/a4Rc2/ (descargo de responsabilidad: nunca he escrito ningún código AngularJS antes)

---

4 para la respuesta № 5

Aún necesitas configurar callback en los params:

var params = {
"a": b,
"token_auth": TOKEN,
"callback": "functionName"
};
$sce.trustAsResourceUrl(url);

$http.jsonp(url, {
params: params
});

Donde "functionName" es una referencia en cadena a una función definida globalmente. Puede definirlo fuera de su script angular y luego redefinirlo en su módulo.

---

2 para la respuesta № 6

Para analizar, haz esto:

   $http.jsonp(url).
success(function(data, status, headers, config) {
//what do I do here?
$scope.data=data;
}).

O puedes usar `$ scope.data = JSON.Stringify (datos);

En la plantilla angular puedes usarlo como

{{data}}

---

0 para la respuesta № 7

para mí, las soluciones anteriores funcionaron solo una vez que agregué "format = jsonp" a los parámetros de solicitud.

---

0 para la respuesta № 8

Estoy usando angular 1.6.4 y la respuesta proporcionada por subhaze no funcionó para mí. Lo modifiqué un poco y luego funcionó: debe usar el valor devuelto por $ sce.trustAsResourceUrl. Código completo:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
url = $sce.trustAsResourceUrl(url);

$http.jsonp(url, {jsonpCallbackParam: "callback"})
.then(function(data){
console.log(data.found);
});

---