CRUD Operations using JavaScript In SharePoint-Hosted Add-In (ListItems)

You can either continue this article or use the below code in your own way.

Below are functions to perform CRUD Operations on List Items using JavaScript through SharePoint-Hosted Add-in. This code is embedded in App.js file.

var hostWebUrl;
var appWebUrl;
var ctx ;
var appCtxSite;
var web;

$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
    ctx = new SP.ClientContext(appWebUrl);
    appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
    web = appCtxSite.get_web();
   
    deleteItem();
});

// Create a new Item in a List
function createListItem() {
    var list = web.get_lists().getByTitle('My Contacts');
    var itemInfo = new SP.ListItemCreationInformation();
    this.newItem = list.addItem(itemInfo);
    newItem.set_item('Title', 'Gupta');
    newItem.set_item('FirstName', 'Rahul');
    newItem.update();
    ctx.load(newItem);
    ctx.executeQueryAsync(
        Function.createDelegate(this,this.onCreateListItemSuccess),
        Function.createDelegate(this, this.onFail));
}

// Success method of createListItem
function onCreateListItemSuccess() {
    alert('Item added successfully!');
}

// Update an Item of a List
function updateItem() {
    var list = web.get_lists().getByTitle('My Contacts');
    var listItem = list.getItemById(2);
    listItem.set_item('Title', 'Mittal');
    listItem.update();

    ctx.load(listItem);
    ctx.executeQueryAsync(
        Function.createDelegate(this, this.onUpdateItemSuccess),
        Function.createDelegate(this, this.onFail));
}

// Success methos of updateItem
function onUpdateItemSuccess() {
    alert('Item Updated Successfully!');
}

// Delete an Item frm a List
function deleteItem() {
    var list = web.get_lists().getByTitle('My Contacts');
    var listItem = list.getItemById(2);
    listItem.deleteObject();

    ctx.executeQueryAsync(
        Function.createDelegate(this, this.onDeleteItemSuccess),
        Function.createDelegate(this, this.onFail));
}

// Success method of deleteItem
function onDeleteItemSuccess() {
    alert('Item Deleted Successfully!');
}

// Retrieve all the list items
function getListItems() {
    var list = web.get_lists().getByTitle("My Contacts");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' +
        '<Rowlimit>10</Rowlimit></View>');
    this.itemColl = list.getItems(camlQuery);
    ctx.load(this.itemColl);
    ctx.executeQueryAsync(Function.createDelegate(this, this.onGetListItemsSuccess), Function.createDelegate(this, this.onFail));
}

// Success method of getListItems function
function onGetListItemsSuccess() {
    var listItem = '';
    var listEnumerator = this.itemColl.getEnumerator();
    while (listEnumerator.moveNext()) {
        var currentItem = listEnumerator.get_current();
        listItem += '\nLast Name: ' + currentItem.get_item('Title') +
            '\nFirst Name: ' + currentItem.get_item('FirstName');
    }
    alert(listItem.toString());
}
// function to manage the query string parameters and return SPHostURL or SPAppWebUrl as per the request.
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}

// generic Fail method
function onFail() {
    alert("Failed!" + arguments[1].get_message());
}