Requirement

Save more than one record (multiple records) to a SharePoint 2013 list in an App using the REST API in a single request (Batch Processing).
Solution

This can be done in one of the following ways:
  1. Traditional Approach: SharePoint REST API ($batch)
  2. Simplified Approach: SharePoint REST API + BreezeJs
Note: To explain both these approaches, I am using a SharePoint CustomList named "Employees" with the 3 columns "First Name", "Last Name" and "Email".
For both of these approaches SharePoint should receive the data as shown below.
Traditional Approach

SharePoint provides $batch processing that requires the following code snippet to generate the data shown in the preceding format. The following code is attached with this article as RESTAPI_Batch.js.
  1. var EmployeesAsJson = [
  2. {
  3. __metadata: {
  4. type: 'SP.Data.EmployeesListItem'
  5. },
  6. FirstName: 'User1',
  7. LastName: 'Test1',
  8. Email: '[email protected]'
  9. },
  10. {
  11. __metadata: {
  12. type: 'SP.Data.EmployeesListItem'
  13. },
  14. FirstName: 'User2',
  15. LastName: 'Test2',
  16. Email: '[email protected]'
  17. },
  18. {
  19. __metadata: {
  20. type: 'SP.Data.EmployeesListItem'
  21. },
  22. FirstName: 'User3',
  23. LastName: 'Test3',
  24. Email: '[email protected]'
  25. }
  26. ];

  2. var batchGuid = generateUUID();
  4. // creating the body
  5. var batchContents = new Array();
  6. var changeSetId = generateUUID();
  8. // get current host
  9. var temp = document.createElement('a');
  10. temp.href = _spPageContextInfo.webAbsoluteUrl;
  11. var host = temp.hostname;
  13. // for each employee...
  14. for (var employeeIndex = 0; employeeIndex < employeesAsJson.length; employeeIndex++) {
  16. var employee = employeesAsJson[employeeIndex];
  18. // create the request endpoint
  19. var endpoint = _spPageContextInfo.webAbsoluteUrl
  20. + '/_api/web/lists/getbytitle(\'Employees\')'
  21. + '/items';
  23. // create the changeset
  24. batchContents.push('--changeset_' + changeSetId);
  25. batchContents.push('Content-Type: application/http');
  26. batchContents.push('Content-Transfer-Encoding: binary');
  27. batchContents.push('');
  28. batchContents.push('POST ' + endpoint + ' HTTP/1.1');
  29. batchContents.push('Content-Type: application/json;odata=verbose');
  30. batchContents.push('');
  31. batchContents.push(JSON.stringify(employee));
  32. batchContents.push('');
  33. }
  34. // END changeset to create data
  35. batchContents.push('--changeset_' + changeSetId + '--');
  37. // generate the body of the batch
  38. var batchBody = batchContents.join('\r\n');
  40. // create the request endpoint
  41. var endpoint = _spPageContextInfo.webAbsoluteUrl
  42. + '/_api/$batch';
  44. // batches need a specific header
  45. var batchRequestHeader = {
  46. 'X-RequestDigest': jQuery("#__REQUESTDIGEST").val(),
  47. 'Content-Type': 'multipart/mixed; boundary="batch_' + batchGuid + '"'
  48. };
  50. // create request
  51. jQuery.ajax({
  52. url: endpoint,
  53. type: 'POST',
  54. headers: batchRequestHeader,
  55. data: batchBody,
  56. success: function (response) {
  57. alert("Successfully saved a batch request");
  58. },
  59. fail: function (error) {
  60. alert('.. create employee FAIL ', error);
  61. }
  62. });
Simplified Approach

The code of the preceding content needs a lot amount of time and patience. As an alternate, Breezejs can be used to simplify the formatting and submission of data. We need to reference Breeze libraries in the SharePoint App Page. The following is the reference for that.
Here is the code format when using Breeze libraries. The following code is available with this article as RESTAPI_Breeze.js
  1. // create a new Employees
  2. function createItem() {
  4. var Employee1 = entityManager.createEntity(EmployeeType);
  5. Employee1.FirstName = 'User1';
  6. Employee1.Title = 'Test1';
  7. Employee1.Email = '[email protected]';
  9. var Employee2 = entityManager.createEntity(EmployeeType);
  10. Employee2.FirstName = 'User2';
  11. Employee2.Title = 'Test2';
  12. Employee2.Email = '[email protected]';
  14. var Employee3 = entityManager.createEntity(EmployeeType);
  15. Employee3.FirstName = 'User3';
  16. Employee3.Title = 'Test3';
  17. Employee3.Email = '[email protected]';
  19. // save entity
  20. entityManager.saveChanges()
  21. .then(function () {
  22. alert("Successfully saved a batch request");
  23. });
  24. }
Future Articles

I will write new article(s) for the following content:
  1. Configuring Breeze to SharePoint 2013 App
  2. Example of Breeze along with code for create, update and delete operations.