analyse de la réponse JSONP $ http.jsonp () dans angular.js

J'utilise la $http.jsonp()requête d'angular qui renvoie avec succès json enveloppé dans une fonction:

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

Comment accéder / analyser le JSON-wrapped-function retourné?

MISE À JOUR: depuis Angular 1.6

Vous ne pouvez plus utiliser la chaîne JSON_CALLBACK comme espace réservé pour spécifier où la valeur du paramètre de rappel doit aller

Vous devez maintenant définir le rappel comme ceci:

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

Changer / accéder / déclarer le paramètre via $http.defaults.jsonpCallbackParam, la valeur par défaut estcallback

Remarque: vous devez également vous assurer que votre URL est ajoutée à la liste approuvée / blanche:

$sceDelegateProvider.resourceUrlWhitelist

ou explicitement approuvé via:

$sce.trustAsResourceUrl(url)

success/errorétaient obsolètes .

Les $httpméthodes de promesse existantes successet erroront été désapprouvés et seront supprimés dans v1.6.0. Utilisez plutôt la méthode standard alors. Si $httpProvider.useLegacyPromiseExtensionsest défini sur falsealors ces méthodes lanceront $http/legacy error.

UTILISATION:

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

Réponse précédente: Angular 1.5.x et avant

Tout ce que vous devriez faire est de changer callback=jsonp_callbackpour callback=JSON_CALLBACKainsi:

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

Et puis votre .successfonction devrait se déclencher comme vous l'avez si le retour a réussi.

Cela vous évite d'avoir à salir l'espace mondial. Ceci est documenté dans la documentation AngularJS ici .

Mise à jour du violon de Matt Ball pour utiliser cette méthode: http://jsfiddle.net/subhaze/a4Rc2/114/

Exemple complet:

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

La CHOSE LA PLUS IMPORTANTE que je n'ai pas comprise pendant un certain temps est que la requête DOIT contenir "callback = JSON_CALLBACK", car AngularJS modifie l'url de la requête , en remplaçant un identifiant unique par "JSON_CALLBACK". La réponse du serveur doit utiliser la valeur du paramètre 'callback' au lieu du codage en dur "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Depuis que j'écrivais mon propre script de serveur PHP, je pensais savoir quel nom de fonction il voulait et je n'avais pas besoin de passer "callback = JSON_CALLBACK" dans la requête. Grosse erreur!

AngularJS remplace "JSON_CALLBACK" dans la requête par un nom de fonction unique (comme "callback = angular.callbacks._0"), et la réponse du serveur doit renvoyer cette valeur:

angular.callbacks._0(json_response);

Cela a été très utile. Angular ne fonctionne pas exactement comme JQuery. Il a sa propre méthode jsonp (), qui nécessite en effet "& callback = JSON_CALLBACK" à la fin de la chaîne de requête. Voici un exemple:

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

Ensuite, affichez ou manipulez {{data}} dans votre modèle angulaire.

Cela devrait fonctionner parfaitement pour vous, tant que la fonction jsonp_callbackest visible dans la portée globale:

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

Démo complète: http://jsfiddle.net/mattball/a4Rc2/ (avertissement: je n'ai jamais écrit de code AngularJS auparavant)

Vous devez encore définir callbackdans les paramètres:

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

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

Où 'functionName' est une référence stringifiée à une fonction définie globalement. Vous pouvez le définir en dehors de votre script angulaire puis le redéfinir dans votre module.

Pour l'analyse, faites ceci-

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

Ou vous pouvez utiliser `$ scope.data = JSON.Stringify (data);

Dans le modèle angulaire, vous pouvez l'utiliser comme

{{data}}

pour moi, les solutions ci-dessus n'ont fonctionné qu'une fois que j'ai ajouté "format = jsonp" aux paramètres de la requête.

J'utilise angular 1.6.4 et la réponse fournie par subhaze n'a pas fonctionné pour moi. Je l'ai un peu modifié, puis cela a fonctionné - vous devez utiliser la valeur renvoyée par $ sce.trustAsResourceUrl . Code complet:

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