Search code examples
javascriptangularjsflaskangularjs-scopeangularjs-service

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


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


Solution

  • @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}