113

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

返された関数でラップされたJSONにアクセス/解析する方法は？

4

8 に答える 8

302

更新：Angular1.6以降

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

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

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

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

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

$sceDelegateProvider.resourceUrlWhitelist

または、以下を介して明示的に信頼されます。

$sce.trustAsResourceUrl(url)

success/error非推奨になりました。

従来の$httppromiseメソッドは非推奨に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);
    });

前の回答：Angular1.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);
    });
于 2012-11-15T15:13:33.580 に答える
69

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

JSON_CALLBACK(json_response);  // wrong!

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

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

angular.callbacks._0(json_response);
于 2013-10-15T02:11:06.557 に答える
9

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

于 2014-12-24T02:31:13.963 に答える
4

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コードをこれまでに作成したことはありません）

于 2012-08-22T14:36:16.663 に答える
4

まだパラメータを設定する必要がありますcallback：

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

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

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

于 2016-05-16T10:06:24.853 に答える
2

解析のためにこれを行います-

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

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

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

{{data}}
于 2016-02-08T15:37:24.490 に答える
0

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

于 2016-06-30T08:04:35.770 に答える
0

私はAngular1.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);
    });
于 2017-05-11T06:46:07.643 に答える