How to bulk create items in SharePoint list using javascript?

Question

I have a list in SharePoint Online that has a custom HTML form. The form has the following structure:

Country:

Color:

Type:

(These are in a table/gridview and are repeatable/many) Name: Lastname: Gender: Age:

My goal is to have up to 40 rows in the table/gridview so people can add records and once they hit the save button, an item is to be created for each entry in the row with additional appended information from the Country, Color and Type to be added with each record.

So the end result would be a SharePoint list item created for each row.. ex: Country, Color, Type, Name, Lastname, Gender, Age Country, Color, Type, Name, Lastname, Gender, Age

I can create items using the script below but am trying to figure out how can a loop through all the items in the table/gridview and create an item using the same script for each row that has data in the columns for each row:

<script>

var siteUrl = 'http://example.org';

function createListItem() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Testing1');

    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);

    oListItem.set_item('Title', 'My New Item!');

    oListItem.update();
    clientContext.load(oListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script><button onclick="createListItem();">Try it</button>

Any help is appreciated

Can you provide additional code as rendered in DOM for table / grid view ... — Godwin, Dec 08 '14 at 14:18

Godwin · Accepted Answer · 2014-12-08T15:04:07.630

You can try the following script , please note the items are loaded into ClientContext stack and executed in a single call. Worked fine for me for about 6 items . If you face any performance issue doing it together for 40 items, you can accordingly modify the code to execute for each item or instead , do a clientcontext.executequeryasync for every 10 items.

<script>

var siteUrl = 'Your Site URL';

function createListItem() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('testGodwin');    
 var cntInt;
 var itemCreateInfo;
 
 // get the Table
 var table = document.getElementById('tblOne');
 var rowLength = table.rows.length;
    
 //Loop through each row
    for (cntInt = 0; cntInt < rowLength; cntInt++) { 
 
  // Set the column values here - example considers first cell holds Title value
     var row = table.rows[cntInt];
  var titleVal = row.cells[0] ;
  
  // Create the item and Load into Stack
  itemCreateInfo = new SP.ListItemCreationInformation();
  var oListItem = oList.addItem(itemCreateInfo); 
  oListItem.set_item('Title', titleVal);
  oListItem.update();
  clientContext.load(oListItem);
  
  }
   
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script><button onclick="createListItem();">Try it</button>

Hi Godwin, thanks for your help. I got the script to create items and loop but when i add some text in the table columns I get the following text added to the SharePoint list item once I hit the try button: System.Collections.Generic.Dictionary`2[System.String,System.Object] Any suggestions? Thanks — Jack Daniels, Dec 09 '14 at 05:59
Hi jack , is this added to every column in an item or just one particular column ? — Godwin, Dec 10 '14 at 15:55
I think this is with the way your Table is rendered in DOM. It will be good if you can share the code rendering in DOM of your table cell. Can you please try the following Change in the line var titleVal = row.cells[0] --- To ----- var titleVal = row.cells[0].innerhtml — Godwin, Dec 10 '14 at 16:02

How to bulk create items in SharePoint list using javascript?

1 Answers1