SharePoint/Angular can't delete item - Error 412

Question

Update: I have changed my Services and Controller as follows and am now receiving an Error 412 (HTTP/1.1 412 Precondition Failed). Here is my updated code:

Service:

appServices.factory('appType', ['$resource', function ($resource) {
    return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items(:Id)", { Id: "@Id" },
    {
        'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
        'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
        'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } },
        'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() }, 'IF-MATCH': "*" },
    }
    );
}]);

Relevant part of Controller:

$scope.removeType = function (type) {

appType.delete({ Id: type.Id });
console.log("Deleted" + type.ID);
}
}]);

Original Post:

I am attempting to delete an item/row in an Angular App built on top of SharePoint 2013, but when I am attempt the delete it appears to process, except nothing is removed from the SharePoint list. Using the network tab in IE, I get a 400 error.

Here is my controller:

appControllers.controller('appSettingsCtrl', ['$scope', 'appTypes', function ($scope, appTypes) {

// Retrieve Types
$scope.types = [];


appTypes.query({}, function (data) {
    $scope.types = data.value;
});


// Create Types
var typeEntry = new appTypes;

$scope.addType = function () {
    console.log("Clicked");
    typeEntry.Title = $scope.itemtype;
    typeEntry.$save();
}

// Delete types
$scope.removeType = function (type) {

appTypes.delete({}, { Id: type.ID });
console.log("Deleted" + type.ID);
}
}]);

Here is my HTML:

    <table class="table table-striped">
        <tr>
            <th>Type</th>
            <th>
                Action
            </th>
        </tr>

        <tr ng-repeat="type in types" id="type{{type.Id}}">

            <td>
                {{type.Title}}
            </td>
            <td>
                <button type="button" class="btn btn-danger" data-ng-click="removeType(type)">Delete</button>
            </td>
        </tr>
    </table>

Here is my service:

   appServices.factory('appTypes', ['$resource', function ($resource) {
    return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items", {Id: "@Id" },
    {
        'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
        'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
        'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } },
        'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val(), 'IF-MATCH': '*'  } },
    }
    );
}]);

Here is some sample JSON:

{
"value": [
    {
        "FileSystemObjectType": 0,
        "Id": 5,
        "ID": 5,
        "ContentTypeId": "0x01004CE051F4BDBACB43BB22C234F8F497FE",
        "Title": "Type 1",
        "Modified": "2015-03-13T18:35:09Z",
        "Created": "2015-03-13T18:35:09Z",
        "AuthorId": 12,
        "EditorId": 12,
        "OData__UIVersionString": "1.0",
        "Attachments": false,
        "GUID": "9ceee022-a418-43d4-86b1-1de6d68edc47"
        }
   ]
}

have you captured any packets using something like Charles to see what is happening behind the scenes? That will tell you a lot. — PRB, Mar 16 '15 at 16:25
Not yet, I am digging through POSTMAN and seeing an 403 Forbidden — Kode, Mar 16 '15 at 16:27
Why are you passing `{ Id: type.ID }` as the second parameter to `.delete()`? Shouldn't it be the first parameter? — JLRishe, Mar 16 '15 at 16:32
I was following the booking example here: http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html Digging deeper, I am now getting a 400 error once I add the header of 'IF-MATCH': '*' — Kode, Mar 16 '15 at 16:36
This is also an example I was following (see answer): http://stackoverflow.com/questions/13269882/angularjs-resource-restful-example — Kode, Mar 16 '15 at 16:44
On the "IF-MATCH" issue, you need to make sure that your server supports it. On the 400, make sure that the server is getting the parameters it's expecting. As JLRish mentioned, try changing this: appTypes.delete({}, { Id: type.ID }); to appTypes.delete({ Id: type.ID }); — PRB, Mar 17 '15 at 00:03
See example here: http://stackoverflow.com/questions/17376890/angular-js-full-example-of-get-post-delete-put-client-for-a-rest-crud-backend — PRB, Mar 17 '15 at 00:05
On last comment - if you are going to use REST with Angular, you should really be using this if you can: https://github.com/mgonto/restangular - it takes the pain out of rest. — PRB, Mar 17 '15 at 00:07

score 2 · Accepted Answer · answered Mar 18 '15 at 13:34

I am using following headers when removing a item from a list.

 "accept": "application/json;odata=verbose",
 "content-type": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val(),
 "If-Match": "*",
 "X-Http-Method": "DELETE".

For me it works. Hope it helps to you too.

score 0 · Answer 2 · answered Mar 17 '15 at 21:01

Blame this error on having a small typo that malformed the header (The If-Match was outside of the headers:. This is correct:

'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose', 'X-RequestDigest': $("#__REQUESTDIGEST").val(), 'IF-MATCH': '*' } }

SharePoint/Angular can't delete item - Error 412

2 Answers2