How to wrap an object around my data when using Angular $resource

Question

I have a simple angular service that returns a $resource. Lets say it looks like this:

$resource '/users/:id/:options.json', {id: '@id', options: '@options'},
            create_user: {
                method: 'POST'
            }

Now in my controller I use this resource by creating a new instance of my user service:

user = new UserService()
                user.name = $scope.user.name
                user.email = $scope.user.email
                user.password = $scope.user.password
                user.password_confirmation = $scope.user.password_confirmation
                user.$create_user()

But when the last line is executed, the data is sent but it is not in a object.

Now I have Devise managing my user account and looking into their registration controller, it seems they expect me to send the data in an object called: sign_up.

How can I describe in the $resource, that I want my data to be encapsulated in my custom object?

EDIT: This is what server gets. It is not happy with it and says that every value is missing.

Parameters: {"name"=>"foo", "email"=>"foo@bar.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "registration"=>{"name"=>"foo", "email"=>"foo@bar.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}}

EDIT2: Working server log with .erb registration:

Parameters: {"utf8"=>"✓", "authenticity_token"=>"xMEDtMWf72yuTwbkaq21c0ZKynoBSWnSypXfm+xJYvNph1d4iKqLIBwwe0DSA3I/YCU+pAHDd23ylc4y7ximEQ==", "user"=>{"name"=>"lol", "email"=>"lol@lol.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}, "commit"=>"Sign up"}

michelem · Answer 1 · 2015-06-29T19:23:56.220

1

This should work:

var User = $resource(
     '/users/:id/:options.json', {id: '@id', options: '@options'},
     create_user: {
         method: 'POST'
     }
);

User.create_user({user: $scope.user});

edited Jun 29 '15 at 19:23

answered Jun 29 '15 at 19:04

michelem

14,430
5
50
66

Edited my answer. Still the same problem. Also shouldn't the first param in the $resource constructor be for the URL variables? – Kaspar Jun 29 '15 at 19:13
So the problem is in the server side not client, what's the server code? – michelem Jun 29 '15 at 19:15
Made another edit on the original post. As you can see the server expects it to be wrapped inside of a 'user' object. – Kaspar Jun 29 '15 at 19:22
Wrap it like this: `User.create_user({user: $scope.user})` (Answer edited) – michelem Jun 29 '15 at 19:24
This actually works but it seems to cause problems when I have more complicated data that has deep nesting to it because then Angular will have trouble knowing what is what and what goes where. That is why I used the form I showed in my answer. Would you happen to know how to do the same thing in that way also? – Kaspar Jun 29 '15 at 19:33
Just change each to `user.user.name = $scope.user.name` don't touch the last one `user.$create_user()` – michelem Jun 29 '15 at 19:38

Nik Klassen · Accepted Answer · 2015-06-29T20:00:44.930

I would recommend using transformRequest on that route. Your code would look something like this.

$resource('/users/:id/:options.json',
          {id: '@id', options: '@options'},
          {
              create_user: {
                  method: 'POST', 
                  transformRequest: function(data, headers) {
                      return angular.toJson({
                          user: data
                      });
                  }
              }
          });

This allows you to change the data being sent. The data object passed to transformRequest is your User object. The headers will already have the Content-Type application/json so you don't need to add that here.

I like this. Thank you for the answer! – Kaspar Jun 29 '15 at 19:43 — Kaspar, Jun 29 '15 at 19:43

How to wrap an object around my data when using Angular $resource

2 Answers2