Search code examples
jqueryangularjsrestsharepoint

Sharepoint Angular REST add item yields 400 (Bad Request)

I have been banging my head against the wall for a couple of days now. I'm trying to add an item to a list in Sharepoint with Angular js.

Retrieving items is smooth but adding items doesn't work for me.

Code:

spApp.controller('spListCtrl', function($scope, $http, $q) {
    $http.post("https://tools.site.com/_api/lists/getbytitle('PersonalFilter')/items", {
        'Title': 'TEST'
    }, {
        headers: {
            'Accept': 'application/json; odata=verbose',
            'X-RequestDigest': $("#__REQUESTDIGEST").val()
        }
    }).success(function(data, status, headers, config) {
        console.log("YES");
    }).error(function(data, status, headers, config) {});
});

I have done this before with jQuery Ajax (in a similar fashion) but I can't seem to locate the problem.

The script is running on the same site as to where the call is made, so no Cross-Domain calling. Furthermore this is embedded with the script editor, so this is running directly inside a Sharepoint Masterpage.

Any suggestions?

Solution

  • This error might occur due to the following reasons:

    1.Invalid List Item payload

    In particular the format of body attribute must have the following format for list item:

    $http({
          data: { Title : 'John Doe', __metadata:  {type: 'SP.Data.ContactsListItem' }},  
          //remaining parameters are omitted for clarity 
      });

    where

    • Title is a property of List Item
    • __metadata attribute is a mandatory and specifies the entity type of List Item (in your case this atribute is missing, in my case since it is a Contacts list, the value is SP.Data.ContactsListItem) See About List Item entity type section below that describes how to determine entity type of list item.

    2. Missing header Content-Type

    Content-Type have to be specified, for example:

    $http({
         headers: {
                    "Content-Type" : "application/json;odata=verbose",
                    //...                 
                  }          
 });

    The following example demonstrates how to create List Item using SharePoint 2013/Online REST.

    Example

    $scope.createContact = function() {

      var endpointUrl = "https://contoso.sharepoint.com/_api/web/lists/getByTitle('Contacts')/items";
      var itemPayload = { Title : 'John Doe', __metadata:  {type: 'SP.Data.ContactsListItem' }};

      $http({
               method: "POST",
               url : endpointUrl,
               data: itemPayload,  
               headers: {
                           "Content-Type" : "application/json;odata=verbose",
                           "Accept": "application/json;odata=verbose",
                           "X-RequestDigest": $("#__REQUESTDIGEST").val() 
                        }          
      }).success(function (data, status, headers, config) {  
          //Process List Item
          var contact = data.d;
      }).error(function (data, status, headers, config) {  
          //An error occured...
      });  

 }

    About List Item entity type

    The following query allows to determine entity type of List Item:

    Endpoint Uri: https://contoso.sharepoint.com/_api/web/lists/getByTitle('<list title>')?$select=ListItemEntityTypeFullName