How to send objects with arrays using angular resource?

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 :-\

Can you show how you are posting the data to the server now? — lwalden, Mar 08 '15 at 18:58
Really not clear what you are asking and it seems more like a server side issue than an angular one — charlietfl, Mar 08 '15 at 22:39
How is it a server side issue if I'm talking about the request the server receives? I can't make things more clear... please read again more carefully. — Nathan, Mar 09 '15 at 06:39
@Nathan please give us more complete code so we can see where your issue is coming from. The two lines of code that you have in your question don't give enough information — Tucker, Mar 11 '15 at 03:02
That's all that's in the resource factory. Beyond that I'm just using a resource instance and calling `$update()` on him. Are you asking to see the resource data object? — Nathan, Mar 11 '15 at 03:08

score 1 · Accepted Answer · answered Mar 16 '15 at 05:14

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()

sylwester · Answer 2 · 2015-03-16T09:46:51.453

1

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

edited Mar 16 '15 at 09:46

answered Mar 16 '15 at 09:20

sylwester

16,498
1
25
33

score 0 · Answer 3 · answered Mar 11 '15 at 21:39

0

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).

answered Mar 11 '15 at 21:39

floribon

19,175
5
54
66

I just update the code sample to show you what's in the resource factory. There is no other code. I'm just using the bare-bones angular 1.3 resource object with the exception of adding a bare-bones custom update method. This method can be called on the class like so: `Product.current(id: instance.id, product: instance)` or the instance like so: `instance.$current()`. My problem is the data sent to the server is different in both cases even when I'm dealing with the same instance. – Nathan Mar 11 '15 at 22:37
Could you try my snippet and tell if it works? Also, how do you create `currentProduct` ? How does it have access to `$update` ? – floribon Mar 11 '15 at 22:41
It makes a `GET` call using the your snippet? – Nathan Mar 11 '15 at 22:51
You say `Product.update(id: currentProduct.id, product: currentProduct)` works but `currentProduct.$update()` doesn't work. I say instead of these try `currentProduct.$update.bind(Product) ();` – floribon Mar 12 '15 at 00:12
Yes, I tried that, and I said it makes a `GET` call to the server rather than an `UPDATE`. – Nathan Mar 12 '15 at 00:23

score 0 · Answer 4 · answered Mar 16 '15 at 20:29

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)});       
});

How to send objects with arrays using angular resource?

4 Answers4