AngularJS: PUT send data with URL but not as JSON data

Question

Here is my UserService

angular.module('userServices', ['ngResource']).factory('User', function($resource) {
  return $resource('/users/:userId',
      // todo: default user for now, change it
      {userId: 'bd675d42-aa9b-11e2-9d27-b88d1205c810'},
      {update: {method: 'PUT', params:{profile: '@profile'}, isArray: false}}
  );
});

In my controller, I do

$scope.save = function() {
    $scope.user.$update({profile: $scope.profile});
}

But when I see the Network Tab in Chrome, I see

Request URL:http://localhost:5000/users/bd675d42-aa9b-11e2-9d27-b88d1205c810?profile=%5Bobject+Object%5D
Request Method:PUT
Status Code:200 OK

How can I send this as data payload? so that URL is

http://localhost:5000/users/bd675d42-aa9b-11e2-9d27-b88d1205c810

and data goes as

{
  day_in_month: 5
}

My endpoint expects the data to be part of request, so that it can parse it as request.json

Thank you

daydreamer · Accepted Answer · 2013-05-28 03:43:40Z

10

@lucuma answer solved my problem.

I am sharing the code from my code base which worked after making changes as per @lucuma's suggestion (Thanks a lot @lucuma!)

The UserService looks like

angular.module('userServices', ['ngResource']).factory('User', function($resource) {
  return $resource('/users/:userId',
      // todo: default user for now, change it
      {userId: 'bd675d42-aa9b-11e2-9d27-b88d1205c810'},
      {update: {method: 'PUT', data:{}, isArray: false}} // add data instead of params
  );
});

and ProfileController looks like

function ProfileController($scope, User) {
    $scope.profile = {};
    $scope.user = User.get();
    $scope.save = function () {
        // I was using $scope.user.$update before which was wrong, use User.update()
        User.update($scope.profile,
            function (data) {
                $scope.user = data; // since backend send the updated user back
            });
    }

After making these changes, I my network tab in Chrome was as expected

Request URL:http://localhost:5000/users/bd675d42-aa9b-11e2-9d27-b88d1205c810
Request Method:PUT
Status Code:200 OK
Request Payload:
{"day_in_month":25}

answered May 28, 2013 at 3:43

daydreamer

92.9k204 gold badges477 silver badges754 bronze badges

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

1 Comment

timhc22 Over a year ago

I had a similar frustration with .update as oppose to .$update. I think because we are using User as a service which returns $resource (instead of assigning $resource to a variable in the controller). Hopefully this comment will help anyone else trying to do this. (It certainly would have helped me!)

lucuma · Accepted Answer · 2013-05-28 03:30:05Z

8

I would suggest you make the following change to your update declaration:

{update: {method: 'PUT', data:{profile:'@profile'}, isArray: false}}

Check out the network tab on this plunker. -v.1.1.5

Here is the same example on stable version 1.0.7.

edited May 28, 2013 at 3:30

answered May 28, 2013 at 1:27

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

3 Comments

daydreamer Over a year ago

Thank @lucuma, I can see it works for your plunker, I tried the same thing, but not working for me, it is still getting in URL, I am using v 1.0.6 for both angular.js and angular-resource.js

lucuma Over a year ago

Here it is using the most up to date stable version (1.0.7): plnkr.co/edit/DgmEwxV7T63IPZoNdBxe?p=preview and it functions the same.

daydreamer Over a year ago

Huge Thanks @lucuma, I was doing it all wrong actually, I am adding my answer with details which will be based on what you said

Collectives™ on Stack Overflow

AngularJS: PUT send data with URL but not as JSON data

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related