web-dev-qa-db-fra.com

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

J'utilise la requête $http.jsonp() 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 function-wrapped-retourné?

javascriptangularjsjsonp
112
akronymn

UPDATE: depuis Angular 1.6

Vous ne pouvez plus utiliser la chaîne JSON_CALLBACK en tant qu'espace réservé pour spécifier l'emplacement de la valeur du paramètre de rappel.

Vous devez maintenant définir le rappel comme suit:

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

Changer/accéder/déclarer un paramètre via $http.defaults.jsonpCallbackParam, par défaut à callback

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

$sceDelegateProvider.resourceUrlWhitelist

ou explicitement approuvé via:

$sce.trustAsResourceUrl(url)

success/error were obsolète.

Les méthodes de promesse $http héritées success et error sont obsolètes et seront supprimées à partir de la version 1.6.0. Utilisez la méthode standard then à la place. Si $httpProvider.useLegacyPromiseExtensions est défini sur false, ces méthodes jetteront $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 devez faire est de changer callback=jsonp_callback en callback=JSON_CALLBACK comme suit:

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

Et ensuite, votre fonction .success devrait se déclencher comme si le retour avait abouti.

En procédant ainsi, vous éviterez de salir l’espace mondial. Ceci est documenté dans la documentation AngularJS ici .

Le violon de Matt Ball a été mis à jour 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);
    });
297
subhaze

Le La chose la plus importante Je ne comprenais pas depuis longtemps est que la requêteDOITcontient "callback = JSON_CALLBACK", car AngularJS modifie la requête url, en substituant un identifiant unique "JSON_CALLBACK". La réponse du serveur doit utiliser la valeur du paramètre 'callback' au lieu du code "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Étant donné que j'écrivais mon propre script de serveur PHP, je pensais connaître le nom de la fonction qu'il souhaitait et qu'il n'était pas nécessaire de passer "callback = JSON_CALLBACK" dans la demande. Grosse erreur!

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

angular.callbacks._0(json_response);
70
Joseph Oster

C'était très utile. Angular ne fonctionne pas exactement comme JQuery. Il possède 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.

8
Peter

Cela devrait fonctionner parfaitement pour vous, tant que la fonction jsonp_callback est 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/ (disclaimer: je n'ai jamais écrit de code AngularJS auparavant)

5
Matt Ball

Vous devez toujours définir callback dans 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 sous forme de chaîne à une fonction définie globalement. Vous pouvez le définir en dehors de votre script angulaire, puis le redéfinir dans votre module.

4
paradite

Pour analyser cela -

   $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}}
2
user1547535

pour moi, les solutions ci-dessus ne fonctionnaient qu'une fois lorsque j'ai ajouté "format = jsonp" aux paramètres de la demande.

0
Tali

J'utilise un angulaire 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);
    });
0
mikatuo