CRUD operations in SharePoint hosted apps using REST API

SharePoint hosted apps can be developed using only Javascript, but still we have 2 options and they’re Javascript Object Model (JSOM) for the SharePoint and SharePoint client REST API. This post explains how to perform CRUD operations in a list using REST API.

The following code is written in ‘Revealing Module Pattern’ using the self invoking function. A simple built it Contact List is used in this sample.

var Qbe = window.Qbe || {};
Qbe.RestContacts;
  
Qbe.RestContactsCRUD = Qbe.RestContactsCRUD || {};
  
Qbe.RestContactsCRUD = function () {
    
    createItem = function(newContact) {
        $.ajax({
            url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(
                {
                    '__metadata': {
                        'type': 'SP.Data.ContactListListItem'
                    },
                    'Title': newContact.fname,
                    'FirstName': newContact.lname,
                    'WorkPhone': newContact.phone.toString()
                }),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
  
            success: function () {
                readAllContacts();
            },
  
            error: function (err) {
                alert(JSON.stringify(err));
            }
        });
    },
  
    updateItem = function (updatedContact) {
        $.ajax({
            url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/" +
                "getItemByStringId('" + updatedContact.id.toString() + "')",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(
                {
                    '__metadata': {
                        'type': 'SP.Data.ContactListListItem'
                    },
                    'Title': updatedContact.fname,
                    'FirstName': updatedContact.lname,
                    'WorkPhone': updatedContact.phone.toString()
                }),
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "IF-MATCH": "*",
                "X-HTTP-Method" : "PATCH"
            },
  
            success: function (data) {
                readAllContacts();
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
  
        })
    },
  
    deleteItem = function (id) {
        $.ajax({
            url : _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/" +
                "getItemByStringId('" + id.toString() + "')",
            type: "DELETE",
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "IF-MATCH": "*"
            },
            success: function () {
                readAllContacts();
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    },
  
    readAllContacts = function () {
        $.ajax(
            {
                url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/items" +
                    "?$select=Id,FirstName,Title,WorkPhone" +
                    "&$orderby=ID",
                type: "GET",
                contentType: "application/json;odata=verbose",
                headers: {
                    "Accept": "application/json;odata=verbose"
                },
                success: function (data) {
                    var html = [];
                    html.push("<table><thead><tr><th>ID</th><th>First Name</th>");
                    html.push("<th>Last Name</th><th>Phone</th><th>ETag</th></tr></thead>");
  
                    var result = data.d.results;
  
                    for(var i = 0; i < result.length; i++)  {
                        html.push("<tr><td>");
                        html.push(result[i].ID);
                        html.push("</td><td>");
                        html.push(result[i].FirstName);
                        html.push("</td><td>");
                        html.push(result[i].Title);
                        html.push("</td><td>");
                        html.push(result[i].WorkPhone);
                        html.push("</td><td>");
                        html.push(result[i].__metadata.etag);
                        html.push("</td><td>");
                    }
                    html.push("</table>");
                    $('#displayDiv').html(html.join(''));
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            })
    },
  
    success = function () {
        readAllContacts();
    },
  
    error = function (sender, args) {
        alert(args.get_message());
    }
  
    return {
        createContactREST: createItem,
        updateContactREST: updateItem,
        deleteContactREST: deleteItem,
        displayContactREST: readAllContacts
    }
}();

Share this:

Related