Get JSON data with AngularJS and add methods on the returning object

Question

I need to get some JSON data from the server with Angular. Let's say the user data. I created a service like that:

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

And in my controller:

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

That works just fine but what if I want to add some methods to the user? For instance in the view I would like to do {{user.isAdmin()}}. Is it the correct approach? Where can I add those methods?

A method that operates on the parameters I get from the JSON. Is a mere example it could have been getFullName() or such. — Gio Polvara
– Gio Polvara, Commented Oct 10, 2013 at 14:25
this is a code style thing, but I would rename the User service to UserService or FetchUser or GetUser to indicate what it's doing. It isn't obvious from the word User that it's a service. — user9903
– user9903, Commented Oct 11, 2013 at 15:39
from the Angular docs (docs.angularjs.org/guide/dev_guide.services.creating_services) it looks like you don't put any suffix of such to services names. But your suggestion makes sense of course. Do you think there is something like a code style guide for Angular? — Gio Polvara
– Gio Polvara, Commented Oct 14, 2013 at 14:41

Adam · Accepted Answer · 2013-10-11 15:26:02Z

3

If you wanted your service to always return an object with this method, do something like this:

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

Now any future code that references this promise and uses .then() will retrieve the new object. Take a look at the promise documentation for more information.

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

Keep in mind by using 'then' on an httpPromise it will be converted to a normal promise. You no longer have the convenience methods 'success' and 'error'.

It may be better practice to create a class for the object you are returning with a constructor function which takes the data object and assigns appropriate properties (or extends the instance). This way you can simply do something like

return new User(val);

And you will get all of the methods you want (with a prototype, etc).

edited Oct 11, 2013 at 15:26

answered Oct 10, 2013 at 14:29

Adam

1,1437 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Over a year ago

I forgot to remember that .then on an http promise gives you the response object, and not the data as .success would. Thanks Gpx for correcting me.

Erstad.Stephen · Accepted Answer · 2013-10-10 14:55:18Z

0

You can do this in a few ways in the service you created:

Start using $resource and use a transform on the response:
http://jsfiddle.net/roadprophet/prtAP/ ...

transformResponse: function (data, headers) {
```
                data = {};
                data.coolThing = 'BOOM-SHAKA-LAKA';
                return data;
            }  
```

... I recommend this method because it scales cleaner due to the use of $resource.

Setup a transformResponse with $http: http://jsfiddle.net/roadprophet/bPfcz/
Use your own promise that resolves after the get promise resolves but with the mapped data. This is probably the most manual way to handle it since it requires you to manage multiple promises.

answered Oct 10, 2013 at 14:55

Erstad.Stephen

1,0357 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get JSON data with AngularJS and add methods on the returning object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related