Virtual attributes in ngResource

Question

Is it possible to add virtual attributes to a ngResource? I created a service like this

app.factory('Person', ['$resource', function($resource) {

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        }
      });
}])

Person has an attribute name and an attribute surname.
I want to retrive the fullname by adding a virtual attribute fullname returning resource.name + resource surname.
I know I could add it in the controller, but adding it to the service it will make it much more portable. I tried something like this

app.factory('Person', ['$resource', function($resource) {

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        },
    fullname: function(resource){
      return resource.name + ' ' + resource.surname;
    }
  });
 });
}])

but it doesn't work.

score 4 · Answer 1 · answered Jun 10 '14 at 10:25

4

As per the docs, $resource returns a constructor. You can leverage the usual prototype of the constructor to add members, i.e.:

var Person = $resource('api/path/:personId', {
            personId: '@_id'
        }, {
            update: { method: 'PUT' }
        }); // same as the 1st snippet from the question

Person.prototype.xxxx = ...;

return Person; // from your Angular service

In the previous example xxxx can be anything normally allowed in a prototype. If what you want is actually a derived property, i.e. a JS property that will always reflect the name and surname properties, then you need a fairly recent browser that supports Object.defineProperty() and replace the Person.prototype line above with:

Object.defineProperty(
    Person.prototype,
    "fullname",
    {get: function() { return this.name + " " + this.surname; }}
);

answered Jun 10 '14 at 10:25

Nikos Paraskevopoulos

39,514
12
85
90

It works like any other property but you can't set a value to it (unless you specify a setter) – Wawy Jun 13 '14 at 10:10
Of course not, and it should not, since this is a derived (calculated) property. A setter can be defined if needed by some other use case though. – Nikos Paraskevopoulos Jun 13 '14 at 10:22
I'm not disagreeing with you ^^, just wanted to clarify. – Wawy Jun 13 '14 at 10:24
This looks good, but I want to see if someone has a more "angular" solution. – pasine Jun 13 '14 at 22:47
The angular way is to transform the response as done in that plunk: http://jsfiddle.net/roadprophet/YpvG7/ – Laurent DECLERCQ a.k.a Nuxwin Nov 18 '15 at 08:04

Khanh TO · Accepted Answer · 2014-06-13T13:26:34.043

You could try intercepting the response from the Person resource and augment the response. Like this:

app.factory('Person', ['$resource', function($resource) {
  function getFullName(){
      return this.name + ' ' + this.surname;
  };

  return $resource('api/path/:personId', {
    personId: '@_id'
      }, {
        update: {
          method: 'PUT'
        },
        'get': {method:'GET', isArray:false,interceptor:{
              'response': function(response) {
                  response.fullname = getFullName; //augment the response with our function
                  return response;
               }
         }}
      });
}]);

score 2 · Answer 3 · answered Jun 12 '14 at 00:07

2

If you only need the derived property for display purposes, you can create a display filter rather than loading up your model with redundant data:

app.filter('personFullName', function() {
  return function(person) {
    return person.name + " " + person.surname;
  };
})

Then reference the filter in your template:

<div>
  <p>{{person | personFullName}}</p>
  <p>- should match -</p>
  <p>{{person.name}} {{person.surname}}</p>
</div>

answered Jun 12 '14 at 00:07

starchild

496
2
8

This solution is interesting, but I think I would prefer to keep the virtual attribute into the model, so that I can access it in several views without having to deal with the filter in each of them. – pasine Jun 13 '14 at 22:43

score 1 · Answer 4 · edited May 23 '17 at 11:48

Khanh TO put me on the way to a working answer for me, but, as explained in this Angular ticket, in the interceptor, you have to handle and return response.resource instead of response.

Here is a solution (working for Angular 1.4):

app.factory('Person', ['$resource', function($resource) {

return $resource(
    'api/path/:personId',
    {personId: '@_id'},
    {
        update: {method: 'PUT'},
        get: {
            method: 'GET',
            isArray: false,
            interceptor: {
                response: function(response) {
                    var resource = response.resource;
                    resource.fullname = resource.name + ' ' + resource.surname;
                    return resource;
                }
            }
        }
    });
}]);

Virtual attributes in ngResource

4 Answers4