1. ホーム
  2. javascript

[解決済み] JSONPの解析 $http.jsonp() レスポンスをangular.jsで解析する

2022-09-22 09:22:12

質問

私はangularの $http.jsonp() リクエストを使っていますが、これは関数にラップされたjsonを正常に返しています。

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

返されたfunction-wrapped-JSONにアクセス/パースするにはどうすればよいですか?

どのように解決するのですか?

UPDATE: Angular 1.6から。

JSON_CALLBACK文字列をプレースホルダーとして使用することはできなくなりました。 をプレースホルダとして使用することはできなくなりました。

このようにコールバックを定義する必要があります。

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

パラメータを変更/アクセス/宣言するために $http.defaults.jsonpCallbackParam デフォルトは callback

注意:あなたのURLがtrusted/whitelistに追加されていることも確認する必要があります。

$sceDelegateProvider.resourceUrlWhitelist

を経由して、または明示的に信頼される。

$sce.trustAsResourceUrl(url)

success/error でした。 廃止予定 .

$http レガシーなプロミスメソッド success そして error は非推奨とされ、v1.6.0 で削除される予定です。代わりに標準のthenメソッドを使用してください。もし $httpProvider.useLegacyPromiseExtensions に設定されている場合は false に設定されている場合、これらのメソッドは $http/legacy error .

USEです。

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

前回の回答 Angular 1.5.x以前

あなたがしなければならないことは、変更することです callback=jsonp_callbackcallback=JSON_CALLBACK のように

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

そして、あなたの .success 関数は、リターンが成功した場合、あなたが持っているように発火するはずです。

この方法で行うことで、グローバル空間を汚さずに済みます。これはAngularJSのドキュメントに記載されています。 ここで .

Matt Ball氏のフィドルを更新し、このメソッドを使用するようにしました。 http://jsfiddle.net/subhaze/a4Rc2/114/

完全な例です。

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