使用 AngularJS 获取 JSON 数据并在返回对象上添加方法答案

【问题标题】：Get JSON data with AngularJS and add methods on the returning object使用 AngularJS 获取 JSON 数据并在返回对象上添加方法
【发布时间】：2013-10-10 14:23:02
【问题描述】：

我需要使用 Angular 从服务器获取一些 JSON 数据。比方说用户数据。我创建了这样的服务：

app.service('User', function($http) {
  retrun $http({method: 'GET', url:'/current_user'});
});

在我的控制器中：

app.controller('SomeCtrl', function($scope, User) {
  User.success(function(data) {
    $scope.user = data;
  });
});

这很好，但是如果我想向用户添加一些方法怎么办？例如在视图中我想做{{user.isAdmin()}}。这是正确的方法吗？我在哪里可以添加这些方法？

【问题讨论】：

那么isAdmin()是什么
一种对我从 JSON 获得的参数进行操作的方法。只是一个例子，它可能是getFullName() 之类的。
那么是的，这应该可以正常工作。这不工作吗？
这是一个代码风格的东西，但我会将用户服务重命名为 UserService 或 FetchUser 或 GetUser 以表明它在做什么。从“用户”这个词来看，它并不是一项服务。
来自 Angular 文档 (docs.angularjs.org/guide/dev_guide.services.creating_services) 看起来您没有在服务名称中添加任何此类后缀。但是你的建议当然是有道理的。你认为有类似 Angular 的代码风格指南之类的东西吗？

标签： json angularjs

【解决方案1】：

如果您希望您的服务始终使用此方法返回一个对象，请执行以下操作：

app.service('User', function($http) {
  return $http({method: 'GET', url:'/current_user'}).
         then(function(response) {
           response.data.isAdmin = function() { return true; };
           return response.data;
         });
});

现在任何引用此承诺并使用 .then() 的未来代码都将检索新对象。查看 Promise 文档了解更多信息。

http://docs.angularjs.org/api/ng.$q

请记住，在 httpPromise 上使用“then”，它将被转换为正常的 Promise。您不再拥有便捷方法“成功”和“错误”。

使用构造函数为您返回的对象创建一个类可能是更好的做法，该构造函数获取数据对象并分配适当的属性（或扩展实例）。这样你就可以简单地做类似的事情

return new User(val);

你会得到你想要的所有方法（带有原型等）。

【讨论】：

我忘了记住 .then 在 http 承诺上给你的是响应对象，而不是 .success 那样的数据。感谢 Gpx 纠正我。

【解决方案2】：

您可以在您创建的服务中通过几种方式执行此操作：

开始使用 $resource 并对响应使用转换：
http://jsfiddle.net/roadprophet/prtAP/ ...

transformResponse: 函数（数据，标题）{

                data = {};
                data.coolThing = 'BOOM-SHAKA-LAKA';
                return data;
            }

... 我推荐这种方法，因为由于使用了 $resource，它可以更清晰地扩展。

使用 $http 设置一个 transformResponse： http://jsfiddle.net/roadprophet/bPfcz/
使用您自己的 Promise，该 Promise 在 get Promise 解析后解析，但使用映射的数据。这可能是最手动的处理方式，因为它需要您管理多个 Promise。

【讨论】：