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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11856272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:34:17  来源:igfitidea点击:

How to alter the data returned by $resource in Angular.js?

javascriptangularjs

提问by AngularChef

I'm using an API that returns JSON data in this format:

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

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

I'm using Angular's $resourceservice to fetch this data.
My code - which is located in a controller - goes something like this:

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

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

And then, in the view, I can display the data like this:

然后,在视图中,我可以像这样显示数据:

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

It all works fine, but:

一切正常,但是:

  • I'd rather expose only the contents of entities.datato the view, instead of the whole entitiesobject. How can I intercept the data returned by the GET request to modify it beforeit populates $scope.entities?
  • Correlated question: since I am fetching an arrayof data, it would be cleaner to use Entity.query()instead of Entity.get(). But if I use Entity.query()in the code above, I get an error "TypeError: Object # has no method 'push'". This makes sense, since the API is returning an object instead of an array (hence, no 'push' method on the object). Again, if I could extract the .dataattribute from the response, I'd have an array.
  • 我宁愿只entities.data向视图公开 的内容,而不是整个entities对象。如何拦截 GET 请求返回的数据以填充之前对其进行修改$scope.entities
  • 相关的问题:因为我取一个阵列的数据,这将是清洁剂使用Entity.query()代替Entity.get()。但是如果我Entity.query()在上面的代码中使用,我会得到一个错误“TypeError: Object # has no method 'push'”。这是有道理的,因为 API 返回的是对象而不是数组(因此,对象上没有“推送”方法)。同样,如果我可以.data从响应中提取属性,我会有一个数组。

Following these indicationsby Dan Boyon, I managed to customize the default $resourceservice and to override the .get() or .query() methods, but I'm not sure where to go from there.

按照Dan Boyon 的这些指示,我设法自定义了默认$resource服务并覆盖了 .get() 或 .query() 方法,但我不确定从哪里开始。

回答by Chris

I don't think you need to modify the get or query defaults. Just use the success callback to do what you want. It should be more robust as well.

我认为您不需要修改 get 或 query 默认值。只需使用成功回调来做你想做的事。它也应该更健壮。

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

Html will be cleaner, too:

Html 也会更干净:

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

By the way, I usually declare services for my resources and then inject them into my controllers as I need them.

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

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

回答by Ismail RBOUH

You can use the Response Transformer (transformResponse) like this:

您可以像这样使用响应转换器 (transformResponse):

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

This code modifies the "query" method behaviour, you can do the same for "get" ... !

这段代码修改了“查询”方法的行为,你可以对“获取”...做同样的事情!