jQuery – Operations on object array and update table

Adding rows by direct values is fixed html and we can’t do other operation on data except update/delete. We needed to keep the row html element to update or to delete the particular row. This is beneficial if we want to work on some data. But what if we need to sent some data from server side and then append our data on the page.

Just keep an array into jQuery and load all the server-side data into that. Now don’t need to work on row html directly, we will work on the array of object and draw table html quickly. From our action method, pass a list of employees in the view bag because we are not using the model here.

public IActionResult TableByObjectArray()
{
        var lstEmployees = new List<JQFormModel>();
        lstEmployees.Add(new JQFormModel() { guid = Guid.NewGuid(), name = "Joseph", post = "Developer", location = "Melbourne" });
        lstEmployees.Add(new JQFormModel() { guid = Guid.NewGuid(), name = "George", post = "Designer", location = "London" });
        ViewBag.employees = lstEmployees;
        return View();
}

//assign the list into jquery array
var employees = @Html.Raw(Json.Serialize(ViewBag.employees));

In this employee list we have taken a guid property i.e., a unique value attached with particular employee. On the page, hold the passed employees in n array and draw row’s html. On adding the new employee to our array, we will push employee object into our array and re-draw html.

$('#btnAddEmployee').click(function () {
        var guid = createUUID();
        var name = $('#inputName').val();
        var post = $('#inputPost').val();
        var location = $('#inputLocation').val();
        employees.push({
            guid: guid,
            name: name,
            post: post,
            location: location
        });
        clearInputs();
        drawEmployeeTable();
});

On edit button we will pass employee’s guid value to the function and find that employee from our employee array. Keep the array index into a global variable, and set the values from row values not extracting from html elements. Same on delete button, pass the employee’s guid and delete that related employee from array. After add/update and delete operation, just re-draw row html.

function deleteEmployee(guid) {
    var deleteIndex = getJsonObjIndex(guid);
    if (deleteIndex !== undefined && deleteIndex != -1) {
        employees.splice(deleteIndex, 1);
        drawEmployeeTable();
    }
}

function editEmployee(guid) {
    editIndex = getJsonObjIndex(guid);
    if (editIndex !== undefined && editIndex != -1) {
        $('#inputName').val(employees[editIndex].name);
        $('#inputPost').val(employees[editIndex].post);
        $('#inputLocation').val(employees[editIndex].location);
    }
}
//editIndex is global on this page and default assigned to -1

On saving the employee, we will check the edit index value and push or update particular employee value into array and re-draw the html.

$('#btnAddEmployee').click(function () {
        var guid = createUUID();
        var name = $('#inputName').val();
        var post = $('#inputPost').val();
        var location = $('#inputLocation').val();
        if (editIndex != -1 && editIndex != undefined) {
            employees[editIndex].name = name;
            employees[editIndex].post = post;
            employees[editIndex].location = location;
        }
        else {
            employees.push({
                guid: guid,
                name: name,
                post: post,
                location: location
            });
        }
        clearInputs();
        drawEmployeeTable();
});

We are using a function getJsonObjIndex to get the index value, check the code, there is a loop on employee array and if any employee’s guid will equal to passed guid value then we will return the index value, otherwise it will pass negative (-1) or undefined value. You can use the function code every time you want to find the employee by guid or just create this function.

function getJsonObjIndex(guid) {
    var index = -1;
    $.each(employees, function (i, v) {
        if (v && v.guid === guid) {
            index = i;
        }
    });
    return index;
}

On adding new employee, we are setting guid value with an employee same like we have passed by server-side. We need to create a function into our script, that will return guid value, like below code:

function createUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

At the last, our draw html function would have same lines as in previous post but in edit and delete function, we need to pass employee guid value. We have created this function because we are creating the rows from the starting on append/delete anything from existing html.

function drawEmployeeTable() {
    var employeeHtml = '';
    $.each(employees, function (i, v) {
        employeeHtml += '<tr>';
        employeeHtml += '<td class="tdName">' + v.name + '</td>';
        employeeHtml += '<td class="tdPost">' + v.post + '</td>';
        employeeHtml += '<td class="tdLocation">' + v.location + '</td>';
        employeeHtml += '<td><a class="btn btn-primary" onClick="editEmployee(\'' + v.guid + '\')">Edit</a></td>';
        employeeHtml += '<td><a class="btn btn-danger" onClick="deleteEmployee(\'' + v.guid + '\')">X</a></td>';
        employeeHtml += '</tr>';
    });
    $('#tblEmployees').html(employeeHtml);
}

On clearing input function re-set edit index value to -1 so that, after edit a row, we can add new one without any conflicts.