AngularJS转换响应内容


Posted in Javascript onJanuary 27, 2016

从远程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转换。

Javascript 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 #Javascript
javascript中的3种继承实现方法
Jan 27 #Javascript
jQuery+css实现的换页标签栏效果
Jan 27 #Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 #Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
拼音码表的生成
2006/10/09 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
贷款担保书
2015/01/20 职场文书
求职简历自我评价2015
2015/03/10 职场文书
学校捐款活动总结
2015/05/09 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android