zoukankan      html  css  js  c++  java
  • 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转换。

  • 相关阅读:
    python数据类型详解
    DEDECMS首页循环调用一级栏目和二级栏目的实现方法
    DEDE无简略标题时显示完整标题
    Dede调用简略标题_简略标题标签(短标题)
    织梦include基础函数介绍(v5+系统的一些函数介绍)
    织梦dede模板中调用会员信息标签的方法
    安装系统的一些知识
    Java的设计模式 之 简单的工厂模式(二)
    Java的设计模式 之 简单的工厂模式(一)
    linux的UDEV
  • 原文地址:https://www.cnblogs.com/darrenji/p/5162557.html
Copyright © 2011-2022 走看看