parsowanie odpowiedzi JSONP $ http.jsonp () w angular.js

Używam $http.jsonp()żądania angulara, które pomyślnie zwraca json opakowane w funkcję:

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

Jak uzyskać dostęp / przeanalizować zwróconą funkcję-zawiniętą-JSON?

AKTUALIZACJA: od Angular 1.6

Nie możesz już używać ciągu JSON_CALLBACK jako symbolu zastępczego do określania, gdzie powinna znajdować się wartość parametru wywołania zwrotnego

Musisz teraz zdefiniować callback w następujący sposób:

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

Zmień / uzyskaj / zadeklaruj parametr przez $http.defaults.jsonpCallbackParam, domyślniecallback

Uwaga: musisz również upewnić się, że Twój adres URL został dodany do zaufanej / białej listy:

$sceDelegateProvider.resourceUrlWhitelist

lub jawnie zaufane przez:

$sce.trustAsResourceUrl(url)

success/errorzostały wycofane .

Te $httpmetody obietnica starszych successi errorbyły przestarzałe i zostaną usunięte w v1.6.0. Zamiast tego użyj metody standard then. Jeśli $httpProvider.useLegacyPromiseExtensionsjest ustawiona na, falsete metody będą generować $http/legacy error.

POSŁUGIWAĆ SIĘ:

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

Poprzednia odpowiedź: Angular 1.5.x i wcześniejsze

Wszystko, co powinieneś zrobić, to zmienić callback=jsonp_callbacksię callback=JSON_CALLBACKtak:

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

A potem twoja .successfunkcja powinna uruchomić się tak, jak ją masz, jeśli powrót się powiódł.

Robiąc to w ten sposób, nie musisz brudzić globalnej przestrzeni. Jest to udokumentowane w dokumentacji AngularJS tutaj .

Zaktualizowano skrzypce Matta Ball'a, aby używały tej metody: http://jsfiddle.net/subhaze/a4Rc2/114/

Pełny przykład:

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

Najważniejsze nie rozumiałem już od jakiegoś czasu jest to, że wniosek musi zawierać „callback = JSON_CALLBACK”, ponieważ angularjs modyfikuje URL żądania , zastępując unikalny identyfikator dla „JSON_CALLBACK”. Odpowiedź serwera musi zawierać wartość parametru „callback” zamiast „JSON_CALLBACK” na sztywno:

JSON_CALLBACK(json_response);  // wrong!

Ponieważ pisałem własny skrypt serwera PHP, pomyślałem, że wiem, jakiej nazwy funkcji potrzebuje i nie muszę podawać w żądaniu „callback = JSON_CALLBACK”. Wielkim błędem!

AngularJS zastępuje „JSON_CALLBACK” w żądaniu unikalną nazwą funkcji (np. „Callback = angular.callbacks._0”), a odpowiedź serwera musi zwrócić tę wartość:

angular.callbacks._0(json_response);

To było bardzo pomocne. Angular nie działa dokładnie tak jak JQuery. Ma własną metodę jsonp (), która rzeczywiście wymaga „& callback = JSON_CALLBACK” na końcu ciągu zapytania. Oto przykład:

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

Następnie wyświetl lub manipuluj {{data}} w szablonie Angular.

To powinno działać dobrze, o ile funkcja jsonp_callbackjest widoczna w zakresie globalnym:

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

Pełne demo: http://jsfiddle.net/mattball/a4Rc2/ (zastrzeżenie: nigdy wcześniej nie pisałem żadnego kodu AngularJS)

Nadal musisz ustawić callbackparametry:

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

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

Gdzie „nazwaFunkcji” to ujednolicone odniesienie do funkcji zdefiniowanej globalnie. Możesz zdefiniować go poza swoim skryptem kątowym, a następnie przedefiniować w swoim module.

Do analizowania zrób to-

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

Lub możesz użyć `$ scope.data = JSON.Stringify (data);

W szablonie Angular możesz go używać jako

{{data}}

u mnie powyższe rozwiązania działały tylko wtedy, gdy dodałem "format = jsonp" do parametrów żądania.

Używam kątowego 1.6.4 i odpowiedź dostarczona przez subhaze nie działa dla mnie. Trochę go zmodyfikowałem i wtedy zadziałało - musisz użyć wartości zwracanej przez $ sce.trustAsResourceUrl . Pełny kod:

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