AngularJS - Send data in body of POST request

Question

I am trying to send data in the body of a POST request to a RESTful API in my AngularJS application.

My current structure for this request is a controller which grabs data and send this to a service, which then calls the request from its associated factory, as follows:

Controller

userService.saveReport(vm.user.id, searchParams)

Service

service.saveReport = function (id, searchData) {
      var deferred = $q.defer();

      user.saveReport({ userID: id, searchData: searchData }, function(response) {
        deferred.resolve(response);
      }, function(e) {
        deferred.reject(e);
      });

      return deferred.promise;
    };

Factory

    function user($resource, $localStorage, constants) {
    return $resource(constants.API_URL + '/users', { userID: '@userID' }, {
      getReports: {
        method: 'GET',
        url: constants.API_URL + '/users/:userID/reports',
        format: 'json',
        headers: {
          'Accept': 'application/vnd.abp.v1+json',
          'X-Mode': function() {
            return $localStorage.get('mode');
          }
        }
      },
      saveReport: {
        method: 'POST',
        url: constants.API_URL + '/users/:userID/reports',
        format: 'json',
        headers: {
          'Accept': 'application/vnd.abp.v1+json',
          'X-Mode': function() {
            return $localStorage.get('mode');
          }
        }
      }
    });
  }

  angular
    .module('abp')
    .factory('user', user);

})();

I have seen various posts which state $resource allows data: to be send through to form the body of the request, but this doesn't seem to be working. I've tried to add searchData: '@searchData' into the params allowed by the $resource call and then add this into a data section as follows, but this doesn't work (condensed for brevity):

return $resource(constants.API_URL + '/users', { userID: '@userID', searchData: '@searchData' }, {
    saveReport: {
        method: 'POST',
        url: constants.API_URL + '/users/:userID/reports',
        format: 'json',
        data: ':searchData',
        headers: {
          'Accept': 'application/vnd.abp.v1+json',
          'X-Mode': function() {
            return $localStorage.get('mode');
          }
        }
      }
}

How can I send the data of this request in the body of the POST request?

Alex Ryans · Accepted Answer · 2015-05-06 08:00:42Z

3

OK, so I've managed to get this working now by changing how I'm sending the searchData in the service. My controller and factory remain unchanged, however I have changed the service to the following, which seems to work absolutely perfectly:

service.saveReport = function (id, searchData) {
      var deferred = $q.defer();

      user.saveReport({ userID: id }, searchData, function(response) {
        deferred.resolve(response);
      }, function(e) {
        deferred.reject(e);
      });

      return deferred.promise;
    };

answered May 6, 2015 at 8:00

Alex Ryans

1,9355 gold badges23 silver badges32 bronze badges

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

1 Comment

sp00m Over a year ago

This was indeed your error, see docs.angularjs.org/api/ngResource/service/$resource, the section describing the returned object: non-GET "class" actions: Resource.action([parameters], postData, [success], [error]). Always RTFM ;)

Collectives™ on Stack Overflow

AngularJS - Send data in body of POST request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related