Rest API Save Update Delete Record From List

Get List Record  && Delete From List

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
var listName = "associate";
var url = _spPageContextInfo.webAbsoluteUrl;

 $(document).ready(function ()
    {
              Read();
            });

function Read()
{
    getListItems(listName, url, function (data) {
        var items = data.d.results;
 var output;
 output = "<table style=><tr><th>Associate Id</th><th>Associate Name</th><th>Associate Number</th><th>Associate Address</th></tr>";
        // Add all the new items
        for (var i = 0; i < items.length; i++) {
            output = output + "<tr><td>" + items[i].Title + "</td><td> " + items[i].associate_name + "</td><td>" + items[i].associate_num + "</td><td>" + items[i].associate_address + " </td><td><a href='http://internal.ngo.com/Pages/AddAssociateAPI.aspx?ngoid="+items[i].ID+"'>View</a></td><td><input id='btnDelete'  onclick='Delete("+items[i].ID+")'  type='button' value='delete'/></td></tr>";
     
        }

    $("#divList").html(output);

    }, function (data) {
        alert("Ooops, an error occured. Please try again");
    });
}

// READ operation
// listName: The name of the list you want to get items from
// siteurl: The url of the site that the list is in.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails
    function getListItems(listName, siteurl, success, failure) {
    $.ajax({
        url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });
}

function Delete(id) {
    var itemId = id; // Update Item ID here
    deleteListItem(itemId, listName, url, function () {
        alert("Item deleted successfully");
Read();
    }, function () {
        alert("Ooops, an error occured. Please try again");
    });
}
function getListItemWithId(itemId, listName, siteurl, success, failure) {
    var url = siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Id eq " + itemId;
    $.ajax({
        url: url,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d.results.length == 1) {
                success(data.d.results[0]);
            }
            else {
                failure("Multiple results obtained for the specified Id value");
            }
        },
        error: function (data) {
            failure(data);
        }
    });
}
// Delete Operation
// itemId: the id of the item to delete
// listName: The name of the list you want to delete the item from
// siteurl: The url of the site that the list is in.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails
function deleteListItem(itemId, listName, siteUrl, success, failure) {
    getListItemWithId(itemId, listName, siteUrl, function (data) {
        $.ajax({
            url: data.__metadata.uri,
            type: "POST",
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-Http-Method": "DELETE",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "If-Match": data.__metadata.etag
            },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    },
   function (data) {
       failure(data);
   });
}


function Redirect()
{
window.location="http://internal.ngo.com/Pages/AddAssociateAPI.aspx?ngoid=0";
}

</script>
<br><input id="btn12" onclick="Redirect()" type="button" value="Create Associates"/>
<br><br>
<div id="divList">&#160;</div>


Save Annd Update Record from list

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function () {
var id = GetParameterValues();

$("#txtId").text(id);
if(id!=0)
{
    $("#AddAssociate").hide();
    $("#UpdateAssociate").show();
 Update(id);
   
}
else
{
    $("#AddAssociate").show();
    $("#UpdateAssociate").hide();
}

});

function GetParameterValues()
{
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('=');


return url[1];
//alert("Your param0 is " + url[0]);
//alert("Your param1 is " + url[1]);

}


var listName = "associate";
var url = _spPageContextInfo.webAbsoluteUrl;
function Update1(id)
 {
    var itemProperties = {'Title':$("#txtTitle").val(),'associate_name': $("#txtName").val(),'associate_num':$("#txtNumber").val(),'associate_address':      

$("#txtAddress").val()};
    var itemId = id; // Update Item Id here
    updateListItem(itemId, listName, url, itemproperties, function ()
        {
        alert("Item updated, refreshing avilable items");
         },
  function ()
  {
  alert("Ooops, an error occured. Please try again");
  });
  }
function Updateitem(id)
{
      var itemProperties = {'Title':$("#txtTitle").val(),'associate_name': $("#txtName").val(),'associate_num':$("#txtNumber").val(),'associate_address':    

$("#txtAddress").val()};
      var itemId = id; // Update Item Id here
      updateListItem(itemId, listName, url, itemProperties, function () {
      alert("Item updated, refreshing avilable items");
      empty();
    },
function ()
{
       
alert("Ooops, an error occured. Please try again");
   
});
}
function operation(string)
{
if (string == 'update') {
Updateitem($("#txtId").text());
window.location="http://internal.ngo.com/Pages/GetAssociateListingAPI.aspx";
}
else if(string =='add'){
add()
}
}
function add()
{
       var itemProperties = {'Title':$("#txtTitle").val(),'associate_name': $("#txtName").val(),'associate_num':$("#txtNumber").val(),'associate_address':            

       $("#txtAddress").val()};
       createListItem(url,listName,itemProperties,function () {
       alert("Item added, refreshing avilable items");
       empty();
    },
function ()
{
     
 alert("Ooops, an error occured. Please try again");
   
});
}

function Update(id){
    $("#newitem").show();
    var title="";
    var associate_name="";
    var associate_num="";
    var associate_address="";
    getListItemWithId(id, listName, url, function (data)
   {
    title=data.Title;associate_name=data.associate_name;associate_num=data.associate_num;associate_address=data.associate_address;
     empty();
    $("#newitem").show();
    $("#txtId").text(id);
    $("#txtTitle").val(title);
    $("#txtName").val(associate_name);
    $("#txtNumber").val(associate_num);
    $("#txtAddress").val(associate_address);

    },
function (data)
 {
     
 failure(data);
 
 });
}



//Create operation
function createListItem(siteUrl,listName, itemProperties, success, failure) {
var itemType = GetItemTypeForListName(listName);
    //var itemType = getItemTypeForListName(listName);
    itemProperties["__metadata"] = { "type": itemType };

    $.ajax({
        url: siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(itemProperties),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            success(data.d);
        },
        error: function (data) {
            failure(data);
        }
    });
}




// Update Operation
// listName: The name of the list you want to get items from
// siteurl: The url of the site that the list is in. // title: The value of the title field for the new item
// itemId: the id of the item to update
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails



function updateListItem(itemId, listName, siteUrl, itemProperties, success, failure) {
    var itemType = GetItemTypeForListName(listName);
    itemProperties["__metadata"] = { "type": itemType };
    getListItemWithId(itemId, listName, siteUrl, function (data) {
        $.ajax({
            url: data.__metadata.uri,
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(itemProperties),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "X-HTTP-Method": "MERGE",
                "If-Match": data.__metadata.etag
            },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }, function (data) {
        failure(data);
    });
}
function getListItemWithId(itemId, listName, siteurl, success, failure) {
    var url = siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Id eq " + itemId;
    $.ajax({
        url: url,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d.results.length == 1) {
                success(data.d.results[0]);
            }
            else {
                failure("Multiple results obtained for the specified Id value");
            }
        },
        error: function (data) {
            failure(data);
        }
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}



function runCancel()
{
    empty();
}
function empty() {
    $("#txtTitle").val("");
    $("#txtName").val("");
    $("#txtNumber").val("");
    $("#txtAddress").val("");
 
}
function addnewItem() {
    $("#txtTitle").attr("value", "");
    $("#txtName").attr("value", "");
    $("#txtNumber").attr("value", "");
    $("#txtAddress").attr("value", "");
    $("#newitem").show();
 
}

function Redirect()
{
window.location="http://internal.ngo.com/Pages/GetAssociateListingAPI.aspx";
}
</script>

<div id="divList">Create Associate Master</div>
<div id="newitem" >
            <table>
                <tbody>
                    <tr>
<label id="txtId"></label>
                        <td>Associate ID </td>

                        <td>:</td>

                        <td>
                            <input name="associateId" id="txtTitle" type="text" /></td>
                    </tr>
                    <tr>
                        <td>Associate Name </td>

                        <td>:</td>

                        <td>
                            <input name="associateName" id="txtName" type="text" /></td>
                    </tr>
                    <tr>
                        <td>Associate Number </td>

                        <td>:</td>

                        <td>
                            <input name="associateNumber" id="txtNumber" type="text" /></td>
                    </tr>
                    <tr>
                        <td>Associate Address </td>

                        <td>:</td>

                        <td>
                            <input name="associateAddress" id="txtAddress" type="text" /></td>
                    </tr>
                    <tr>
                        <td></td>

                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <div id="AddAssociate" >
                                <input onclick="operation('add')" type="button" id="btnAddSubmit" value="Add" />
                            </div>
                        </td>
                        <td>
                            <div id="UpdateAssociate" >
                                <input onclick="operation('update')" type="button" id="btnUpdate" value="Update" />
                            </div>
                        </td>

                        <td>
                            <input id="btnCancel" onclick="Redirect()" type="button"
                                value="View List" /></td>
                    </tr>
                </tbody>
            </table>

        </div>