AngularJS轉(zhuǎn)換響應內(nèi)容
從遠程API獲取到的響應內(nèi)容,通常是json格式的,有時候需要對獲取到的內(nèi)容進行轉(zhuǎn)換,比如去除某些不需要的字段,給字段取別名,等等。
本篇就來體驗在AngualrJS中如何實現(xiàn)。
在主頁面,還是從controller中拿數(shù)據(jù)。
<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字段是從源數(shù)據(jù)中轉(zhuǎn)換而來的,可能userName對應源數(shù)據(jù)中的fullName,可能源數(shù)據(jù)中有更多的字段。
在AngularJS中,把module之間的關系梳理清楚是一種很好的習慣,比如按如下方式梳理:
angular.module('publicapi.controllers',[]); angular.module('publicapi.services',[]); angular.module('publicapi.transformers',[]); angular.module('publicapi',[ 'publicapi.controllers', 'publicapi.services', 'publicapi.transformers' ])
數(shù)據(jù)還是從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字段就是用來轉(zhuǎn)換數(shù)據(jù)源的。services.Api依賴于services.transformer.ApiResponse這個服務,在這個服務力完成對數(shù)據(jù)源的轉(zhuǎn)換。
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對數(shù)據(jù)源進行map轉(zhuǎn)換。
- AngularJS入門教程之 XMLHttpRequest實例講解
- AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法
- AngularJS通過$http和服務器通信詳解
- AngularJS中$http服務常用的應用及參數(shù)
- Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- 簡介AngularJS中$http服務的用法
- 詳解AngularJS中$http緩存以及處理多個$http請求的方法
- AngularJS中如何使用$http對MongoLab數(shù)據(jù)表進行增刪改查
- 對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
相關文章
AngularJS select設置默認值的實現(xiàn)方法
這篇文章主要介紹了AngularJS select設置默認值的實現(xiàn)方法的相關資料,這里提供實現(xiàn)方法幫助大家實現(xiàn)這樣的功能,需要的朋友可以參考下2017-08-08詳解AngularJS controller調(diào)用factory
本篇文章主要介紹了詳解AngularJS controller調(diào)用factory,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Angularjs渲染的 using 指令的星級評分系統(tǒng)示例
本篇文章主要介紹了Angularjs渲染的 using 指令的星級評分系統(tǒng)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11使用angularjs.foreach時return的問題解決
這篇文章主要介紹了使用angularjs.foreach時return的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09