How to send objects with arrays using angular resource? - angularjs

Question

I have a product object with a property called category_ids that is an array of ids.
I've added an $update method to my resource factory so I can send a PUT request.
When I PUT, the server receives data that looks like:
id: 1,
description: 'Yada yada',
category_ids: [1,2,3],
product: { id: 1, description: 'Yada yada' } //<-- I need category_ids in here
How can I get the category_ids array into the product node there?
More detail:
I'm just using angular's resource to update:
'use strict'
angular.module('myApp').factory 'Product', ($resource) ->
resource = $resource '/api/v1/products/:id', { id: '#id' },
update:
method: 'PUT'
return resource
Interestingly, this problem only happens with calling instance methods on my object. Calling the class methods on the factory itself works:
currentProduct.$update() <-- This does not give me the format I want!
Product.update(id: currentProduct.id, product: currentProduct) <-- This does :-\

Answer 1

You can add properties to $resource object like
currentProduct.category_ids = [1,2,3];
Now this property becomes request parameter for PUT request.
Lets suppose you have $resource factory name "Product" then following code will work for you
var currentProduct = new Product()
// Bind properties to resource object
currentProduct.id = 1
currentProduct.description = 'Yada yada'
currentProduct.category_ids = [1,2,3]
// Initiate PUT request.
currentProduct.$update()

Answer 2

I believe Rails expecting put request to follow pattern
/product/:id
so when you want to update product you should call it
product.$update({id:product.id});
and that will make request to url
http://api/v1/products?id=1
with request payload like
{"id":"1","description":"Yada yada","category_ids":[1,2,3]}
please see demo here
http://plnkr.co/edit/Utjoj6LirxvzMGSwoffo?p=preview

Answer 3

We would need the code of that $update method, but I suspect it is relying on the this keyword, which is different depending on which object you are calling the function from.
Could you please try this and let us know if it works:
currentProduct.$update.bind(Product) ();
If it does, this means that indeed $update expect this to be Product (which is not the case and is currentProduct in your example instead).

Answer 4

Create a angular service
// Angular Service
angular.module('myApp').factory('Product', function($resource,ENV)
return $resource(ENV.apiEndpoint+'/api/v1/products/:id', {}, {
update: { method: 'PUT' , params:{id:'#id'}}
});
});
In your controller you have to set product object
angular.module('myApp').controller('ProductController',
function ($scope,Product) {
var requestParams = {
id: 1, //Service extracts this parameter to form the url
product: {
id: 1,
description: 'Yada yada'
category_ids: [1,2,3]
}
}
Product.update(requestParams,function(success){
console.log(success)
},function(error){
console.log(error)});
});