Updating a restangularCollection after a put about restangular HOT 13 CLOSED

Right now you have to do it manually, but I think this is a nice feature addition to add to Restangular.

Right now you should find the item you're updating, remove it, and add the result of doing a put.

I'll add this to the next version.

I'm thinking in something like

collection.putElement(idx).then(function(updatedCollection) {
  // Here you have the updated collection
});

from restangular.

That would be awesome indeed !

What do you mean by "do it manually" for now. Do you mean refreshing the items collection from the server ?

from restangular.

obj.put().then(function(updatedObj) {
  array[idx] = updatedObj;
});

Edited for better code :)

from restangular.

That's what I meant. You remove old + add new element to collection.

from restangular.

So it's not that hard to do it now :)

from restangular.

Just added and landed in v 0.6.7.

You can do

// Params and headers are optional as usual
array.putElement(idx, params, headers).

from restangular.

Please let me know if this works out for you

from restangular.

I'm not sure about how I'm supposed to use this new method.
As far as I'm understanding the code, putElement is updating the array and PUT the element to the server.

In my app, I have a Controller that handles the modification of one item of my items collection. This controller is calling the putElement method on the items collection and is supposed to give feedback to the user if something goes wrong. However, my items collection is in another scope that handles the collection display.
When I pass the items collection to the modification controller, I can update the content of my item in place and then call the putElement methods. The items gets updated on the server, but my items collection on my first scope never gets updated....

from restangular.

Hey, so this putElement method is actually inmutable like all of the rest of Restangular methods. Also, it returns a promise.

So, calling putElement will return a promise of the new array, so what you can do is the following.

From your child controller / directive, receive as a parameter the collection of elements. Then just do the following in your controller.

$scope.collection.putElement(idx).then(function(newArray) {
  $scope.collection = newArray;
}, function(response) {console.log("There was an error")} );

As you have scope prototypal inheritance, changing it here, will also change it in your parent controller and therefore will change the view as well.

Hope this works.

from restangular.

Hello,

I have been testing the putElement method in many ways but I can't make it works in my app.
Actually, I need to run the put or putElement method before I close my edit dialog, but I can't find a way to update my items list in my scope after closing the dialog.

Here is a simplified version of my CRUD app :

function ItemsController($scope, Restangular, $dialog) {

    var items = $scope.items = Restangular.all("items").getList();

    $scope.addItem = function() {
        $dialog.open().then(function(newItem) {
            //this is working fine
            //$scope is updated successfully
            items.push(newItem);
        });
    };

    $scope.editItem = function(item) {
        var index = items.$$v.indexOf(item);
        $dialog.open().then(function(updatedItem) {
            //this is not updating the $scope
            items.splice(index, 1, updatedItem);
        });
    };

    $scope.deleteItem = function(item) {
        var index = items.$$v.indexOf(item);
        $dialog.open().then(function() {
            //this is not updating the $scope
            items.splice(index, 1);
        });
    };

}

function NewItemController($scope, $dialog, Restangular) {

    $scope.save = function() {
        var items = Restangular.all("items");
        items.post(item).then(function(newItem) {
            $dialog.close(newItem);
        }, function(error) {
            //show error on dialog
        });
    };
    $scope.cancel = function () {
        $dialog.close();
    };
}

function EditItemController($scope, $dialog, item) {

    $scope.save = function(item) {
        item.put().then(function(updatedItem) {
            $dialog.close(updatedItem);
        }, function(error) {
            //show error on dialog
        });
    };
    $scope.cancel = function () {
        $dialog.close();
    };
}

function DeleteItemController($scope, $dialog, item) {

    $scope.save = function(item) {
        item.delete().then(function(deletedItem) {
            $dialog.close();
        }, function(error) {
            //show error on dialog
        });
    };
    $scope.cancel = function () {
        $dialog.close();
    };
}

from restangular.

Hey,

When you do the getList you are getting a promise that's why the splice doesn't work.

So do the following

// Change from this
var items = $scope.items = Restangular.all("items").getList();

// to this
var items = $scope.items = [] 
Restangular.all("items").getList().then(function(serverItems) {
  items = serverItems;
  $scope.items = serverItems.
});

That should do it :)

from restangular.

Let me know if this works for you.

from restangular.

this worked perfectly fine for me, thanks

from restangular.