using $resource in AngularJs to save array of objects

Question

I am using $resource to retrieve data from the server using query. The server returns an array of objects, which I store in stuklijst. I can send the (updated) contents of stuklijst back to the server by looping through the array and using $save to send each item of the array back to the server. I now want to send all items (the entire stuklijst) to the server in one go, without using the loop.

When trying a $save on stuklijst, Angular throws a "destination.push is not a function" error. How can this be accomplished with $resource?

Here's the code:

Service:

var stukModule = angular.module('stuklijstServices', ['ngResource'])
stukModule.factory('Stuklijsten', function($resource){
 return $resource('rest/stuklijsten/:stuklijstID', {} );
});

Controller:

//Get the data from server      
  $scope.stuklijst = Stuklijsten.query({stuklijstID: $routeParams.stuklijstID});

//See below for sample of data returned by server
//Users can update the data and request a save using saveStuklijst

//Send them back to server (using saveStuklijst(Stuklijst))
  $scope.saveStuklijst = function(lijst) {
    //sending items from stuklijst one by one :
    for(var i = 0; i < lijst.length; i++) 
        {// console.log(i);
         // console.dir(lijst[i]);
          lijst[i].RowID = i
          f = new Stuklijsten(lijst[i]); 
          f.$save({stuklijstID: $routeParams.stuklijstID}); 
        } ;
    };

Data returned by server and stored in Stuklijst:

 [{"Name":"K FlxMT in DG met diameter 025 cm","LineType":0,"ProdID":"DG025KFLXMT","RowID":7,"Unit":"stk","Quantity":1},{"Name":"SPR Fl in DG met diameter 025 cm","LineType":0,"ProdID":"DG025SPRFL","RowID":8,"Unit":"stk","Quantity":1},{"Name":"T FlxFl in DG met diameter 025 cm","LineType":0,"ProdID":"DG025TFLXFL","RowID":9,"Unit":"stk","Quantity":0},{"Name":"VER PL EX in DG met diameter 025 cm","LineType":0,"ProdID":"DG025VERPLEX","RowID":10,"Unit":"stk","Quantity":0},{"Name":"K FlxMT in PV met diameter 008 cm","LineType":0,"ProdID":"PV008KFLXMT","RowID":11,"Unit":"stk","Quantity":0}]

Still did not find a way found to send back the array of arrays in one go to the server using $resource . After some further investigation I was able to do so using $http. However, in that case the beauty of using a REST service gets lost in the process... — thomasc
– thomasc, Commented Jan 6, 2014 at 11:28

Fiver · Accepted Answer · 2016-02-29 19:37:02Z

You can send an array of objects by re-defining your resource's save function to specify isArray=true like so:

stukModule.factory('Stuklijsten', ['$resource', function ($resource) {
    return $resource(
        'rest/stuklijsten/:stuklijstID',
        {},
        {
            save: {
                method: 'POST',
                isArray: true
            }
        }
    );
}]);

Then, in your controller, you can assemble the list and save all in one http request (less chatty API):

$scope.saveStuklijst = function(lijst) {
    var some_list = [];
    for(var i = 0; i < lijst.length; i++) {
        lijst[i].RowID = i
        f = new Stuklijsten(lijst[i]); 
        some_list.push({stuklijstID: $routeParams.stuklijstID}); 
    };
    Stuklijsten.save(some_list);

If you wanted to still be able to POST single objects, you could use the same concept to create a saveBulk function to preserve the original save for the single objects.

Collectives™ on Stack Overflow

using $resource in AngularJs to save array of objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related