CODEWITHSUNDEEP
node.jsangularjsrestangular
Ben
Ben

Reputation: 16679

Object doesn't know its a restangular object

I started working with Restangular and Node today, and I encountered a problem when trying to add a new user to a list of users in my angular view.

view.html

<input type="text" ng-model="app.user.name" />
<input type="button" ng-click="app.addUser( app.user )" />

<ul>
    <li ng-repeat="user in app.users">
        <strong>{{ user.name }}</strong>    
        <input type="button" ng-click="app.removeUser( user )" />           
    </li>
</ul>

app.js

var baseUsers = Restangular.all( 'users' );

app.getUsers = function()
{
    baseUsers.getList().then( function( res ) 
    {
        app.users = res;
    });     
};
app.getUsers();

app.addUser = function( newUser )
{               
    baseUsers.post( newUser ).then( function( res ) 
    {
        if( res.success == true )
        {  
            // add new user to scope array
            app.users.push( res.data ); // res.data contains the newly created user
        }       
    }); 
}

app.removeUser = function( oldUser )
{       
    //...
}

The above works all nice and well, except for one tiny, yet annoying problem.

If I add a new user, the username gets added to the list in the view. BUT, when I click the delete button next to this user, I get this error: TypeError: Object #<Object> has no method 'remove' at app.removeUser. My guess is that when I add the newly created user to the scope array the way I do, it somehow doesn't know that it is a Restangular object. So I thik the problem lies in app.users.push( res.data );

How can I fix this problem?

PS: When I refresh the page, the delete function works. Because then it gets all the items automatically again via app.getUsers, rather than adding the one item manually via push.

Upvotes: 3

Views: 1687

Answers (2)

dsmithco
dsmithco

Reputation: 361

Had a similar issue in a rails app. I don't see your remove function, so I am assuming. But basically Angular doesn't know what the ID is for the newly added user is so you need to grab that from your api response when creating the user. In my case it was a contact.

My scope for the new contact

$scope.addContact = function () {

    // Use the 'then' method to pass the response 'addedContact' back to you
    Restangular.all('contacts').customPOST($scope.newContact).then(function(addedContact){
        // THIS IS WHERE YOU SET THE ID
        $scope.newContact.id = addedContact.id; 
        // Now it will push the new ID too
        $scope.contacts.push($scope.newContact);

    });
};

So your's might look like this

app.addUser = function( newUser )
{               
    baseUsers.post( newUser ).then( function( res ) 
    {
        if( res.success == true ) // BTW you might not need this 1st 'then' function is success
        {  
            // Get the ID from the res
            newUser.id = res.data.id // assuming that this will set the ID

            // add new user to scope array
            app.users.push( newUser ); // res.data contains the newly created user
        }       
    }); 
}

Upvotes: 0

bluenavajo
bluenavajo

Reputation: 483

It is exactly as you told. The new user that you pushed into the array simply was not "restangularized". Have a look at the restangularizeElement function from Restangular and initialize the newly received user before you push it into the users array.

Something like that:

if( res.success == true )
{  
    // add new user to scope array
    app.users.push(
      Restangular.restangularizeElement('', res.data, 'users')
    );
}

The empty string would mean that a user has no parent resource.

Upvotes: 6

Related Questions