如何更改Angular.js中$ resource返回的数据?

时间:2012-08-08 01:02:11

标签: javascript angularjs

我正在使用以这种格式返回JSON数据的API:

{
    paging: {
        previous: null,
        next: null
},
    data: [
        { title: 'First Item' },
        { title: 'Second Item' },
        ...
    ]
}

我正在使用Angular的$resource服务来获取此数据 我的代码 - 位于控制器中 - 就像这样:

var Entity = $resource('/api/entities');
var entities = $scope.entities = Entity.get();

然后,在视图中,我可以显示如下数据:

<ul>
  <li ng-repeat="entity in entities.data">{{entity.title}}</<li>
</ul>

一切正常,但是:

  • 我宁愿只将entities.data的内容暴露给视图,而不是整个entities对象。如何拦截GET请求返回的数据进行修改 之前填充$scope.entities
  • 相关问题:由于我提取了数组数据,因此使用Entity.query()代替Entity.get()会更清晰。但是如果我在上面的代码中使用Entity.query(),我会收到一个错误“TypeError:Object#没有方法'push'”。这是有道理的,因为API返回一个对象而不是一个数组(因此,对象上没有'push'方法)。同样,如果我可以从响应中提取.data属性,我会有一个数组。

Dan Boyon关注these indications,我设法自定义默认的$resource服务并覆盖.get()或.query()方法,但我不知道从哪里去那里。

2 个答案:

答案 0 :(得分:24)

我认为您不需要修改get或query默认值。只需使用成功回调即可完成您想要的操作。它应该更强大。

Entity.get(
    {}, //params
    function (data) {   //success
        $scope.entities = data.data;
    },
    function (data) {   //failure
        //error handling goes here
    });

Html也会更清洁:

 <ul>
      <li ng-repeat="entity in entities">{{entity.title}}</<li>
 </ul>

顺便说一句,我通常会为我的资源声明服务,然后在需要时将它们注入我的控制器。

 myServices.factory('Entity', ['$resource', function ($resource) {
     return $resource('/api/entities', {}, {
     });
 }]);

答案 1 :(得分:1)

您可以像这样使用Response Transformer(transformResponse):

$resource('/api/entities', {}, {
        query: {
            method: 'GET',
            responseType: 'json',
            isArray: true,
            transformResponse: function (response) {
                return response.data;
            }
        }
    });

此代码修改“查询”方法行为,您可以对“get”执行相同操作...!