How to copy of JavaScript object without referencing the original object?

Question

Here after editing the the row data is changed to new row. I only need to create a copy of this object. But it is referencing the original. The changes occurring in original is reflecting in the copied object too.

$(document).ready(function () {
    var nEditing = null;
    var rowdata = null;
    var tabIndex = null;
    var table = null;
    var row = null;

    $('table').on('click', 'a.edit', function (e) {
        e.preventDefault();

        /* Get the row as a parent of the link that was clicked on */
        var nRow = $(this).parents('tr')[0];
        var table = $(this).parents('table')[0];
         row = $(this).parents('tr').find('td');

        if (nEditing !== null && nEditing != nRow) {
            /* A different row is being edited - the edit should be cancelled and this row edited */
            restoreRow(table, rowdata, nEditing);
            editRow(row, nRow);
            nEditing = nRow;
            rowdata = row;
        }
        else 
         if (nEditing == nRow && this.innerHTML == '<i class="fa fa-save"></i>') {
            /* This row is being edited and should be saved */
            saveRow(row, nEditing);
            nEditing = null;
            rowdata = null;
        }
        else {
            /* No row currently being edited */
            nEditing = nRow;
            rowdata = row;
            editRow(row, nRow);

        }
    });


});
//Js edit row inline--------------------------------------------------------------------------------------------
function editRow(table, nRow) {
    //var rowData = table.row(nRow).data();



        // do something with productId, product, Quantity

    var td = $('>td', nRow);
    var Count = td.length-1;
    for (var i = 1; i < Count; i++)
    {
        td[i].innerHTML = '<input type="text" style="width:100%" value="' +table.eq(i).text() + '">';
    }



    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-save"></i></a>';
}




//save inline edit row----------------------------------------------------------------------------------------------
function saveRow(row, nRow) {
    var inputs = $('input', nRow);
    var rowData = row;

    var td = $('>td', nRow);
    var Count = td.length - 1;
    for (var i = 1; i < Count; i++) {
        rowData[i] = inputs[i-1].value;
        td[i].innerHTML = rowData[i];
    }



    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-edit"></i></a>';



}




//Restore the unsaved thing----------------------------------------------------------------------------------------
function restoreRow(table, rowdata, nEditing) {
    var td = $('>td', nEditing);
    var Count = td.length - 1;
    for (var i = 1; i < Count; i++) {
        td[i].innerHTML = '' + rowdata[i].innerHTML + '';
    }

    td[Count].innerHTML = '<a class="edit" href="#"><i class="fa fa-edit"></i></a>';


}

Can you try to edit your question to make it clearer? As it is, it's very hard to understand what goes wrong and which part of the code isn't doing what you want. — GertG, Mar 22 '17 at 19:17

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

If you are looking to copy a DOM element you want the cloneNode function: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode.

If you are looking to copy a normal javascript object, then according to this question this would likely be the fastest:

JSON.parse(JSON.stringify(obj))

Please read the linked question carefully for more info.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 22 '17 at 19:54

JosiahDaniels

2,411
20
37

How to copy of JavaScript object without referencing the original object?

1 Answers1