从远程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中转换响应内容的更多相关文章

  1. AngularJS转换请求内容

    在"AngularJS中转换响应内容"中,体验了如何转换响应内容.本篇来体验如何转换请求内容. 主页面通过onSend方法把request对象转递出去. <form name ...

  2. Fiddler插件 --- 解密Elong Mapi请求参数及响应内容

    当前问题: 在我们日常的Web/App测试过程中, Fiddler是一大辅助利器:在我们团队,也经常使用Fiddler进行App抓包测试. 艺龙 App使用的REST(内部称为Mapi)接口,在使用过 ...

  3. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  4. angularjs表达式中的HTML内容，如何不转义，直接表现为html元素

    在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...

  5. Python3 将configparser从ini文件中读取的内容转换成字典格式

    因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...

  6. Oracle中使用游标转换数据表中指定字段内容格式(拼音转数字)

    应用场景:将数据表TB_USER中字段NNDP的内容中为[sannanyinv]转换为[3男1女] 主要脚本:一个游标脚本+分割字符串函数+拼音转数字脚本 操作步骤如下: 1.创建类型 create ...

  7. python接口自动化：响应内容中json字符串对象的处理

    实现代码如下: import json #定义一个字典.一个列表.两个字符串({}中必须是双引号) di1={"} di2=[{"}] di3='{"name" ...

  8. LoadRunner11脚本小技能之添加请求头+定义变量+响应内容乱码转换打印+事务拆分

    一.添加请求头 存在一些接口,发送请求时需要进行权限验证.登录验证(不加请求头时运行脚本,接口可能会报401等等),所以需要在脚本中给对应请求添加请求头.注意:请求头需在请求前添加,包含url类.su ...

  9. java中两种发起POST请求，并接收返回的响应内容的方式  （转）

    http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...

随机推荐

  1. Protocol Buffers简明教程

    随着微服务架构的流行,RPC框架渐渐地成为服务框架的一个重要部分. 在很多RPC的设计中,都采用了高性能的编解码技术,Protocol Buffers就属于其中的佼佼者. Protocol Buffe ...

  2. 详解Android属性动画

    前面我们讲到的属性动画都是使用代码的定义方式:Android属性动画之ValueAnimator和Android属性动画之ObjectAnimator和AnimatorSet,下面我们再来看看使用XM ...

  3. js继承的几种实现方法

    一.用function实现: function Person(name) { this.name = name; } Person.prototype.getName = function() { r ...

  4. LeetCode（45）： 跳跃游戏 II

    Hard! 题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [ ...

  5. 谷歌云ssh开启root密码登录

    修改配置 1.先选择从浏览器打开ssh连接服务器 连接登录成功后,输入以下命令 sudo -i #切换到root passwd #修改密码 然后会要求输入新密码,然后再重复一次密码,输入密码的时候不会 ...

  6. ***LANMP镜像手册（Apache&Nginx）-lanmp-oneinstack

    LANMP镜像手册(Apache&Nginx) Version PHP7.0.26  转自:http://docs.websoft9.com/xdocs/lanmp-oneinstack-im ...

  7. jqgrid 表格中筛选条件的多选下拉，树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  8. Redis与Zookeeper实现分布式锁的区别

    Redis实现分布式锁 1.根据lockKey区进行setnx(set not exist,如果key值为空,则正常设置,返回1,否则不会进行设置并返回0)操作,如果设置成功,表示已经获得锁,否则并没 ...

  9. AOJ 0525 Osenbei【穷竭搜索】

    AOJ 0525 题意: 有一个烤饼器可以烤r行c列的煎饼,煎饼可以正面朝上(用1表示)也可以背面朝上(用0表示).一次可将同一行或同一列的煎饼全部翻转.现在需要把尽可能多的煎饼翻成正面朝上,问最多能 ...

  10. Zookeeper笔记（二）Paxos算法与Zookeeper的工作原理

    Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目, 它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管 ...