Post data as JSON Body object with angular ngResource

[Hermann Harris]

I am learning angular by trying to create a very simple integration into a Rails web-service I've created. Currently I'm stuck on posting data to my web service as requests keep on failing. I know that the API works, as I'm able to create records using Postman. I'm also able to list all records in my angular app via ngResource GET request.

I believe that the reason for it failing is that I'm not passing the object in a correct format, but I can't find any tutorials on how to do this correctly. I need to pass the post data as a JSON object formatted like this:

{ "foo":
    {"bar":"ygvygs...@mail.com"}
}

Currently this is what my ngResource service looks like:

appServices.factory('Foo', function($resource) {
    var data = $resource(
      'http://localhost:3000/api/v1/foo.json',
      {},
      {
        // 'get': { method:'GET', cache: false},
        'query': { method:'GET', cache: false, isArray:true },
        'save': {
            method: 'POST', 
            cache: false,
            isArray:false,
            headers:{'Content-Type':'application/json; charset=UTF-8'} 
        }
      });
    return data;
});

And then in my controller, I handle the request as follows:

appControllers.controller('FooCtrl', function($scope, Foo, $location) {

    // Our form data for creating a new post with ng-model
    $scope.fooData = {};
    $scope.create = function() {
      var member = new Foo();
      member.$save( {"foo" : [{ "bar" : [ $scope.fooData.bar }] );
      $location.url("/");
    };

});

I think that the issue is a result of the POST being made as params to the URL and not as a body object. By looking at my web-service log I can see this:

"REQUEST_URI"=>"/api/v1/foo.json?foo=%7B%bar%22:%22ygvygs...@mail.com%22%7D&format=json"

How do I pass my request as a body JSON object in the required format?

[Sander Elias]

Hi Harris,

You should just fill out the member object, and pass the object as a parameter to the save function. Something like:

var member = new Foo();

member.bar = [ $scope.fooData.bar }]
member.$save();

This is fairly well documented. On the bottom of the page are a few samples.

Regards

Sander