analizar la respuesta JSONP $ http.jsonp () en angular.js

Estoy usando la $http.jsonp()solicitud de angular que devuelve json correctamente 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-envuelto-JSON?

ACTUALIZACIÓN: desde Angular 1.6

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

Ahora debe definir la devolución de llamada así:

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

Cambiar / acceder / declarar $http.defaults.jsonpCallbackParamparámetro a través de , por defecto escallback

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

$sceDelegateProvider.resourceUrlWhitelist

o de confianza explícita a través de:

$sce.trustAsResourceUrl(url)

success/errorestaban en desuso .

Los $httpmétodos heredados de la promesa successy errorhan quedado obsoletos y se retiró en v1.6.0. En su lugar, utilice el método estándar y luego. Si $httpProvider.useLegacyPromiseExtensionsse establece en false, 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 debe hacer es cambiar callback=jsonp_callbacka Me callback=JSON_CALLBACKgusta:

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

Y luego su .successfunción debería dispararse como lo hizo si el retorno fue exitoso.

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

Se actualizó el violín de Matt Ball 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);
    });

Lo MÁS IMPORTANTE que no entendí por un tiempo es que la solicitud DEBE contener "callback = JSON_CALLBACK", porque AngularJS modifica la URL de la solicitud , sustituyendo un identificador único por "JSON_CALLBACK". La respuesta del servidor debe usar el valor del parámetro 'callback' en lugar de la codificación "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 pasar "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);

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. He aquí 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.

Esto debería funcionar bien para usted, siempre que la función jsonp_callbacksea ​​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 antes había escrito ningún código AngularJS)

Todavía necesitas configurar callbacklos parámetros:

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.

Para analizar haz esto-

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

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

En la plantilla angular puedes usarla como

{{data}}

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

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