AngularJS 変換応答 content_AngularJS-jsチュートリアル-php.cn

AngularJS 変換応答 content_AngularJS

WBOY

リリース： 2016-05-16 15:17:41

オリジナル

1382 人が閲覧しました

リモート API から取得される応答内容は通常 json 形式であるため、不要なフィールドを削除したり、フィールドにエイリアスを付与したりするなど、取得した内容を変換する必要がある場合があります。

この記事では、AngualrJS での実装方法を体験してみましょう。

メインページで、引き続きコントローラーからデータを取得します。

<body ng-app="publicapi">
<ul ng-controller="controllers.View">
<li ng-repeat="repo in repos">
<b ng-bind="repo.userName"></b>
<span ng-bind="repo.url"></span>
</li>
</ul>
</body>

ログイン後にコピー

上記では、userName フィールドと url フィールドがソースデータから変換されています。おそらく userName はソースデータの fullName に対応しており、ソースデータにはさらに多くのフィールドがある可能性があります。

AngularJS では、モジュール間の関係を次のように整理するのが良い習慣です。

angular.module('publicapi.controllers',[]);
angular.module('publicapi.services',[]);
angular.module('publicapi.transformers',[]);
angular.module('publicapi',[
'publicapi.controllers',
'publicapi.services',
'publicapi.transformers'
])

ログイン後にコピー

データは引き続きコントローラーから取得されます:

angular.module('publicapi.controllers')
.controller('controllers.View',['$scope', 'service.Api', function($scope, api){
$scope.repos = api.getUserRepos("");
}]);

ログイン後にコピー

コントローラーはservice.Apiサービスに依存します。

angular.module('publicapi.services').factory('services.Api',['$q', '$http', 'services.transformer.ApiResponse', function($q, $http, apiResponseTransformer){
return {
getUserRepos: function(login){
var deferred = $q.defer();
$http({
method: "GET",
url: "" + login + "/repos",
transformResponse: apiResponseTransformer
})
.success(function(data){
deferred.resolve(data);
})
return deferred.promise;
}
};
}])

ログイン後にコピー

$http サービスのtransformResponse フィールドは、データソースの変換に使用されます。 services.Api は、データソースの変換を完了する services.transformer.ApiResponse サービスに依存します。

angular.module('publicapi.transformers').factory('services.transformer.ApiResponse', function(){
return function(data){
data = JSON.parse(data);
if(data.length){
data = _.map(data, function(repo){
return {userName: reop.full_name, url: git_url};
})
}
return data;
};
});

ログイン後にコピー

上では、データソースのマッピングにアンダースコアが使用されています。