AngularJS轉換響應內容_AngularJS

來源:互聯網
上載者:User

從遠程API擷取到的響應內容,通常是json格式的,有時候需要對擷取到的內容進行轉換,比如去除某些不需要的欄位,給欄位取別名,等等。

本篇就來體驗在AngualrJS中如何?。

在首頁面,還是從controller中拿資料。

<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中,把module之間的關係梳理清楚是一種很好的習慣,比如按如下方式梳理:

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

資料還是從controller中來:

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

controller依賴於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;};}); 

以上,使用了underscore對資料來源進行map轉換。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.