angular.jsでJSONP $ http.jsonp（）応答を解析する

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

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

更新：Angular 1.6以降

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

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

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

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

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

$sceDelegateProvider.resourceUrlWhitelist

または明示的に信頼されます：

$sce.trustAsResourceUrl(url)

success/errorされた非推奨。

$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ドキュメントに記載されています。

この方法を使用するようにマットボールのフィドルを更新しました：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);
    });

AngularJS がリクエストのURLを変更し、「JSON_CALLBACK」の代わりに一意の識別子を使用するため、私がしばらくの間理解していなかった最も重要なことは、リクエストに「callback = 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);

これはとても役に立ちました。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}}を表示または操作します。

関数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コードを記述したことがない）

あなたはまだcallbackparamsで設定する必要があります：

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

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

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

解析するには、これを行います

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

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

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

{{data}}

私にとって上記の解決策は、リクエストパラメーターに「format = jsonp」を追加したときにのみ機能しました。

私はangular 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);
    });