web-dev-qa-db-ja.com

angular.jsのJSONP $ http.jsonp（）応答の解析

関数にラップされたjsonを正常に返しているangularの$http.jsonp()リクエストを使用しています：

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にアクセス/解析する方法は？

javascriptangularjsjsonp
113
akronymn

更新：Angular 1.6以降

JSON_CALLBACK文字列を、コールバックパラメーター値の移動先を指定するためのプレースホルダーとして使用できなくなりました

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

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

$http.defaults.jsonpCallbackParam経由でパラメーターを変更/アクセス/宣言します。デフォルトはcallbackです。

注：URLが信頼済み/ホワイトリストに追加されていることも確認する必要があります。

$sceDelegateProvider.resourceUrlWhitelist

または明示的に信頼されている：

$sce.trustAsResourceUrl(url)

success/error was 非推奨。

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

つかいます：

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_callbackをcallback=JSON_CALLBACKに変更することだけです：

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

そして、戻りが成功した場合、.success関数はあなたが持っているように起動するはずです。

このようにすることで、グローバルスペースを汚す必要がなくなります。これは、AngularJSのドキュメントに記載されています here 。

この方法を使用するために、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);
    });
296
subhaze

最も重要なことしばらくの間理解していなかったのは、リクエストMUSTに「callback = JSON_CALLBACK」が含まれていることです。AngularJSリクエストurlを変更し、「JSON_CALLBACK」を一意の識別子に置き換えます。サーバーの応答では、「JSON_CALLBACK」をハードコーディングする代わりに、「callback」パラメーターの値を使用する必要があります。

JSON_CALLBACK(json_response);  // wrong!

独自のPHPサーバースクリプトを書いていたので、必要な関数名がわかっていると思い、リクエストで「callback = JSON_CALLBACK」を渡す必要はありませんでした。大ミス！

AngularJSは、リクエスト内の「JSON_CALLBACK」を一意の関数名（「callback = angular.callbacks._0」など）に置き換えます。サーバー応答はその値を返す必要があります。

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

これはとても役に立ちました。 Angularは、JQueryとまったく同じようには機能しません。独自のjsonp（）メソッドがあり、実際にはクエリ文字列の最後に「＆callback = JSON_CALLBACK」が必要です。次に例を示します。

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

次に、Angularテンプレートで{{data}}を表示または操作します。

8
Peter

関数jsonp_callbackがグローバルスコープに表示されている限り、これは問題なく機能するはずです。

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

完全なデモ： http://jsfiddle.net/mattball/a4Rc2/ （免責事項：これまでにAngularJSコードを書いたことがありません）

5
Matt Ball

Paramsでcallbackを設定する必要があります：

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

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

ここで、「functionName」は、グローバルに定義された関数への文字列化された参照です。角度スクリプトの外部で定義してから、モジュールで再定義できます。

4
paradite

解析のためにこれを行う-

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

または、 `$ scope.data = JSON.Stringify（data）;を使用できます。

Angularテンプレートでは、次のように使用できます

{{data}}
2
kapil

私にとっては、上記のソリューションは、リクエストパラメータに「format = jsonp」を追加した場合にのみ機能しました。

0
Tali

角度1.6.4を使用していますが、subhazeで提供される回答が機能しませんでした。私はそれを少し修正してから動作しました-$ sce.trustAsResourceUrlによって返される値を使用する必要があります。完全なコード：

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