• 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转换。

  • 相关阅读:
    发明专利授权容易吗?
    No module named 'PyQt5.QtWebEngineWidgets' 解决方法
    Python可视化界面编程入门
    Python用户界面编程PyQt5的四种的布局方式
    cmd进入任何一个文件夹的步骤?
    cmd如何进入和退出Python编程环境?
    《C++ Primer Plus》16.3 标准模板库 学习笔记
    《C++ Primer Plus》16.2 智能指针模板类
    《C++ Primer Plus》16.1 string类 学习笔记
    Python错误和异常 学习笔记
  • 原文地址:https://www.cnblogs.com/darrenji/p/5162557.html
Copyright © 2020-2023  润新知