从远程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. wpf 来回拉动滚动条抛异常

    其中的控件,来回快速的来动滚动条,抛如下异常,但是完全代码捕捉不到. 这个树用到了VirtualizingStackPanel.IsVirtualizing="True".去掉该句 ...

  2. poj1742 多维背包

    普通的多维背包做不了,需要优化一下 但是没有学优化..别的方法也是可以做的 省去一个 表示阶段的 i 维度,dp[j]表示面值为j的钱是否被凑出来了,used[j]表示第i种硬币在凑面值为j的时候被用 ...

  3. cf343c 二分答案+模拟

    /* 怎么判断能否在时间k内完成扫描 贪心:每次取出最靠左边的磁头去扫描最左边的,然后再往右扫描即可 如果当前点无法扫到最左侧点,那么后继点一样无法扫到 */ #include<bits/std ...

  4. Zookeeper单机安装部署与配置（二）

    在上篇博客中简单介绍了Zookeeper的特点和应用场景,详情可参考:<Zookeeper简介(一)>,那么这篇博客我们介绍一下关于Zookeeper的单机模式安装步骤与配置. 环境准备 ...

  5. python 全栈开发，Day136(爬虫系列之第3章-Selenium模块)

    一.Selenium 简介 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全 ...

  6. ***腾讯云直播（含微信小程序直播）研究资料汇总-原创

    这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把一些技术资料和文档归集如下: 1.微信小程序移动直播入门导读 https://cloud.tencent.com/doc ...

  7. [JSOI2009]等差数列

    链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1558 题解: 考虑这么用线段树进行维护,由于他有区间修改等差数列 很容易想到可以用差分数组来维 ...

  8. 6-3 矩阵链成 uva 442

    较为简单的栈题 思路比较好 一次ac 1.char word :word=A:直接  a[word]=xxxx,不用 a[‘word’]=xxxx #include<bits/stdc++.h& ...

  9. 097实战 关于ETL的几种运行方式

    一:代码部分 1.新建maven项目 2.添加需要的java代码 3.书写mapper类 4.书写runner类 二:运行方式 1.本地运行 2.集群运行 3.本地提交集群运行 三:本地运行方式 1. ...

  10. Unity报错 ： BCE0004: Ambiguous reference 'preview': CameraMotionBlurEditor.preview, UnityEditor.Editor.preview.

    建立项目版本为Unity4.6,改为5.3.4版本,运行项目报如下错误: “BCE0004: Ambiguous reference 'preview': CameraMotionBlurEditor ...