【问题标题】:AngularJS $resource JSON field name conversionAngularJS $resource JSON 字段名转换
【发布时间】:2013-10-19 21:48:53
【问题描述】:

我正在开发一个使用 API 处理数据的 AngularJS 项目。现在我正在使用 $resource 实现“创建”功能。除了命名转换之外,一切都很顺利:我使用 camelCase,但 API 只接受 snake_case。 有没有办法自动将这些键转换为snake_case?

服务:

services.factory('Salons', ['$resource',
    function ($resource) {
        return $resource('/salons/:slug', {
            slug: "@slug"
        });
    }
]);

控制器:

controllers.controller('CreateSalonController', ['$scope', 'Salons',
    function ($scope, Salons) {
        $scope.submit = function() {
            Salons.save(this.salon);
        };
    }
]);

查看:

<form name="salonForm" role="form" ng-submit="submit()">
    <div class="form-group">
        <label for="salonContactFirstName">First name</label>
        <input name="contactFirstName" type="text" class="form-control" id="salonContactFirstName" data-ng-model="salon.contactFirstName" />
    </div>
...

【问题讨论】:

  • 我假设您使用的是 REST API。您究竟在哪里面临案件问题?能否举个例子详细说明一下?
  • 感谢您的评论,我更新了问题。看一下视图: data-ng-model="salon.contactFirstName" 当它被发送到 API 时,它应该是 snake_case。在最坏的情况下,我会在视图中重新格式化它。

标签: json api angularjs camelcasing


【解决方案1】:

我没有找到任何内置的解决方案,所以我实现了一个:

一项新服务:

services.factory('Util', function () {
        var Util = {
            stringToSnakeCase: function (input) {
                return input.replace(/([0-9A-Z])/g, function ($1) {
                    return "_" + $1.toLowerCase();
                });
            },
            objectKeysToSnakeCase: function (input) {
                var output = {};
                _.each(input, function (val, key) {
                    output[Util.stringToSnakeCase(key)]
                        = _.isObject(val) ? Util.objectToSnakeCase(val) : val;
                });
                return output;
            }
        };
        return Util;
    }
);

以及更新后的控制器:

controllers.controller('CreateSalonController', ['$scope', 'Salons', 'Util',
    function ($scope, Salons, Util) {
        $scope.submit = function() {
            Salons.save(Util.objectKeysToSnakeCase(this.salon));
        };
    }
]);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-22
    • 1970-01-01
    • 1970-01-01
    • 2020-01-18
    • 2021-01-09
    • 1970-01-01
    相关资源
    最近更新 更多