AngularJS中转换响应内容
从远程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转换。
AngularJS中转换响应内容的更多相关文章
- AngularJS转换请求内容
在"AngularJS中转换响应内容"中,体验了如何转换响应内容.本篇来体验如何转换请求内容. 主页面通过onSend方法把request对象转递出去. <form name ...
- Fiddler插件 --- 解密Elong Mapi请求参数及响应内容
当前问题: 在我们日常的Web/App测试过程中, Fiddler是一大辅助利器:在我们团队,也经常使用Fiddler进行App抓包测试. 艺龙 App使用的REST(内部称为Mapi)接口,在使用过 ...
- 关于AngularJs中监听事件及脏循环的理解
可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...
- angularjs表达式中的HTML内容，如何不转义，直接表现为html元素
在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...
- Python3 将configparser从ini文件中读取的内容转换成字典格式
因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...
- Oracle中使用游标转换数据表中指定字段内容格式(拼音转数字)
应用场景:将数据表TB_USER中字段NNDP的内容中为[sannanyinv]转换为[3男1女] 主要脚本:一个游标脚本+分割字符串函数+拼音转数字脚本 操作步骤如下: 1.创建类型 create ...
- python接口自动化：响应内容中json字符串对象的处理
实现代码如下: import json #定义一个字典.一个列表.两个字符串({}中必须是双引号) di1={"} di2=[{"}] di3='{"name" ...
- LoadRunner11脚本小技能之添加请求头+定义变量+响应内容乱码转换打印+事务拆分
一.添加请求头 存在一些接口,发送请求时需要进行权限验证.登录验证(不加请求头时运行脚本,接口可能会报401等等),所以需要在脚本中给对应请求添加请求头.注意:请求头需在请求前添加,包含url类.su ...
- java中两种发起POST请求，并接收返回的响应内容的方式 （转）
http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...
随机推荐
- 谁说前端不需要懂-Nginx反向代理与负载均衡
转:https://juejin.im/post/5b01336af265da0b8a67e5c9 学到老活到老 前端圈一直很新,一直要不停的学习,而且在进入大厂的路上,还要求熟悉一门后台语言等等.用 ...
- poj2481树状数组解二维偏序
按区间r降序排列,r相同按照l升序排列,两个区间相同时特判一下即可 /* 给定n个闭区间[l,r],如果对区间[li,ri],[lj,rj]来说, 有区间j严格包含(两个边界不能同时重合)在区间i内, ...
- MySQL索引失效的几种情况
1.索引不存储null值 更准确的说,单列索引不存储null值,复合索引不存储全为null的值.索引不能存储Null,所以对这列采用is null条件时,因为索引上根本 没Null值,不能利用到索引, ...
- 关于C#中”扩展方法必须在非泛型静态类中定义“问题的解决
问题描述: 在某个窗口下的编码中使用了以下扩展方法FindControl,以求根据字符串的值去操作控件(本文中的控件为Label控件)的属性. public static Control FindCo ...
- Codeforces Round #369 (Div. 2)-C Coloring Trees
题目大意:有n个点,由m种颜料,有些点没有涂色,有些点已经涂色了,告诉你每个点涂m种颜色的价格分别是多少, 让你求将这n个点分成k段最少需要多少钱. 思路:动态规划,我们另dp[ i ][ j ][ ...
- BZOJ5074 小B的数字 BZOJ2017年10月月赛 其他
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ5074 题意概括 题解 作为蒟蒻的我第一个就选择了过的人最多的D题. 不仔细看好吓人. 然而并不难. ...
- 6-8 树 uva548
read 的方式值得学习 当不知道每一行有多少个输入的时候 getline 在弄成stringstream!一个一个处理 用built递归的方式化大为小进行建立树 dfs 遍历整个树来求最值 变量的 ...
- File的方法
1.介绍 file 对象使用 open 函数来创建. 2.常用的方法
- lnmp thinkphp在linux上支持pathinfo
在lnmp环境中布置thinkphp 默认不支持pathinfo 的 在nginx.conf文件中的server中更改如下 #include enable-php.conf; #布置下面的支持pat ...
- C++雾中风景12:聊聊C++中的Mutex，以及拯救生产力的Boost
笔者近期在工作之中编程实现一个Cache结构的封装,需要使用到C++之中的互斥量Mutex,于是花了一些时间进行了调研.(结果对C++标准库很是绝望....)最终还是通过利用了Boost库的share ...