Can't delete objects with angular.js

Question

I have defined myself an api for use with Angular.js:

angular.module('api', ['ngResource'])
    .factory('Server', function ($resource) {
        return $resource('http://localhost\\:3000/api/servers/:name');
    })
    .factory('ActiveServer', function ($resource) {
        return $resource('http://localhost\\:3000/api/servers/active/:name', {},
            { start: {method: 'POST'}, stop: {method: 'DELETE'} });
    });

The idea, is that I have a set of defined servers, available through the /api/servers/ uri. A particular server can be started by adding it to the /api/servers/active/ uri, and stopped by deleting it.

In my controller, I have the following code:

$scope.start = function() {
    ActiveServer.start(this.server);
};

$scope.stop = function() {
    ActiveServer.stop(this.server);
};

which again is triggered by buttons

    <div class="well span4" ng-repeat="server in servers">
        <h1>{{server.definition.name}}</h1>
        <span class="label label-info">{{server.status}}</span>
        <button type="button" class="btn btn-primary"
                ng-click="start()">Start</button>
        <button type="button" class="btn btn-primary"
                ng-click="stop()">Stop</button>
    </div>

Starting the server works alright, but I have trouble stopping it. The code above ends up with the following request:

Request URL:http://localhost:3000/api/servers/active?$$hashKey=005&_events=[object+Object]&definition=[object+Object]&status=ready
Request Method:DELETE

The definition-part of my server object, containing the name that identifies the server to stop, isn´t serialized right.

How can I fix this?

bmleite · Accepted Answer · 2013-01-15 01:14:22Z

3

If your API (ActiveServer) only needs to receive the server's name to work, then pass only the server's name during the service call. Like this:

$scope.start = function() {
    ActiveServer.start({name: this.server.definition.name});
};

$scope.stop = function() {
    ActiveServer.stop({name: this.server.definition.name});
};

Passing the entire this.server object in any service call will result on the entire object being parametrized into the HTTP request.

extended explanation:

When you use something like api/servers/:name on your $resource URL, you are basically saying that the :name part will be replaced by the value of a property with the same name (in this case, 'name') received on the parameters (i.e. {name: 'someName'}).

From the angularJS $resource documentation:

Each key value in the parameter object is first bound to url template if present and then any excess keys are appended to the url search query after the ?. Given a template /path/:verb and parameter {verb:'greet', salutation:'Hello'} results in URL /path/greet?salutation=Hello. If the parameter value is prefixed with @ then the value of that parameter is extracted from the data object (useful for non-GET operations).

So, if you call service.get({name: 'abc'}) then URL of the request will be api/server/abc

If you call service.get({name: 'abc', id: '123'}) then URL will be api/server/abc?id=123

In your case, the this.server Object looks something like this:

{ 
  $$hashKey: 005,
  _events: {},
  definition: {},
  status: ready
}

Since AngularJS does not do in-depth parametrization, _events and definitions are shown as _events=[object+Object]&definition=[object+Object] on the URL.

edited Jan 15, 2013 at 1:14

answered Jan 15, 2013 at 0:21

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vegar Over a year ago

That may be an workaround - I'll have to try it out - but I would love an explanation on why my solution doesn't work, and how this is supposed to be used.

bmleite Over a year ago

Updated my answer with some extended explanations. Hope it helps.

Collectives™ on Stack Overflow

Can't delete objects with angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related