Bulk Update In SharePoint List Using JSOM

In this article I will explain the way for bulk edit in SharePoint list items using JavaScript object model (JSOM) 

Steps for Implementation

• Get Current Context.
• Get App web URL and Host Web URL from Query string parameter.
• Calling BulkEdit method in document ready.
• Get List from app context site.
• Get list collection by query.
• Then Update the item by ID.
• Load the updated item array
• Finally all item will be updated successfully

In your JavaScript file write the following code,

// Js code Starts here
'use strict';
//Get Current Context
var context = SP.ClientContext.get_current();
//Declaring the variables
varhostWebURL, appWebURL;
// this code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function()
    {
    // Get App web URL and Host Web URL from Query string parameter
    hostWebURL = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebURL = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
    //Calling Bulk Edit method in document ready
    BulkEdit();
});
//Update multiple items
functionBulkEdit()
{
        var title = "Test";
        vardfd = $.Deferred();
        //Get list from host web
        varprogramList = appCtx.get_web().get_lists().getByTitle('ProgramList');
        varcamlQuery = newSP.CamlQuery();
        camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + title + "</Value></Eq></Where></Query></View>");
        //Get items by Query
        varprogColl = programList.getItems(camlQuery);
        //Load item collection
        context.load(progColl);
        context.executeQueryAsync(function()
                {
                varcurrentItemArray = [];
                //Check itemcollection count greater than 0
                if (progColl.get_count() > 0)
                {
                    varprogEnum = progColl.getEnumerator();
                    while (progEnum.moveNext())
                    {
                        varcurrentItem = progEnum.get_current();
                        varprogTitle = currentItem.get_item("Title");
                        varcurrentId = currentItem.get_item("ID");
                        //Get Item by current ID
                        var items = programList.getItemById(currentId);
                        //set isdeleted column to True
                        items.set_item("IsDeleted", true);
                        //Update the item
                        items.update();
                        //Push item on the array
                        currentItemArray.push(items);
                        //Load the item Array
                        context.load(currentItemArray[currentItemArray.length - 1]);
                    }
                    context.executeQueryAsync(function()
                      {
                        //Item Updated sucess
                        alert("Items are updated Successfully");
                        dfd.resolve();

                    }, function(sender, args)
                     {
                        //Item updated fail
                        console.log("Request Failed to get projectlist Items :" + args.get_message());
                    });
                } else
                {
                    dfd.resolve();
                }
            },
            function(sender, args)
             {
                $('.loader').hide();
                console.log("Request failed in Portfolio List " + args.get_message());
            });
        returndfd.promise();
    }
    //method for read query string value
functionmanageQueryStringParameter(paramToRetrieve)
{
    varparams = document.URL.split("?")[1].split("&");
    varstrParams = "";
    for (var i = 0; i < params.length; i = i + 1)
    {
        varsingleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
        {
            returnsingleParam[1];
        }
    }
}

Summary

In this article we explored how to edit the multiple items on the list using JavaScript object model (JSOM).