AngularJS轉(zhuǎn)換響應(yīng)內(nèi)容
從遠(yuǎn)程API獲取到的響應(yīng)內(nèi)容,通常是json格式的,有時候需要對獲取到的內(nèi)容進(jìn)行轉(zhuǎn)換,比如去除某些不需要的字段,給字段取別名,等等。
本篇就來體驗(yàn)在AngualrJS中如何實(shí)現(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對應(yīng)源數(shù)據(jù)中的fullName,可能源數(shù)據(jù)中有更多的字段。
在AngularJS中,把module之間的關(guān)系梳理清楚是一種很好的習(xí)慣,比如按如下方式梳理:
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這個服務(wù)。
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服務(wù)中的transformResponse字段就是用來轉(zhuǎn)換數(shù)據(jù)源的。services.Api依賴于services.transformer.ApiResponse這個服務(wù),在這個服務(wù)力完成對數(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ù)源進(jìn)行map轉(zhuǎn)換。
- AngularJS入門教程之 XMLHttpRequest實(shí)例講解
- AngularJS出現(xiàn)$http異步后臺無法獲取請求參數(shù)問題的解決方法
- AngularJS通過$http和服務(wù)器通信詳解
- AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
- Angularjs中$http以post請求通過消息體傳遞參數(shù)的實(shí)現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- 簡介AngularJS中$http服務(wù)的用法
- 詳解AngularJS中$http緩存以及處理多個$http請求的方法
- AngularJS中如何使用$http對MongoLab數(shù)據(jù)表進(jìn)行增刪改查
- 對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
相關(guān)文章
AngularJS select設(shè)置默認(rèn)值的實(shí)現(xiàn)方法
這篇文章主要介紹了AngularJS select設(shè)置默認(rèn)值的實(shí)現(xiàn)方法的相關(guān)資料,這里提供實(shí)現(xiàn)方法幫助大家實(shí)現(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-09AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能,包括數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單等,感興趣的小伙伴們可以參考一下2016-07-07Angular應(yīng)用程序的Hydration基本概念詳解
這篇文章主要為大家介紹了Angular應(yīng)用程序的Hydration基本概念詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09angular $watch 一個變量的變化(實(shí)例講解)
下面小編就為大家?guī)硪黄猘ngular $watch 一個變量的變化(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08