Removing array from another array based on checkbox check

Question

I have a html table with checkbox in each rows. On checking each checkbox I'm pushing the row values to an array named checkboxArrayForOperations.

HTML

<table>
<?php
$i = 0;
foreach ($databaseValue as $stValue) {
$i++;
?>
<tr>
    <input type="text" id="stName<?php echo $i;?>" value="<?php echo $stValue['stName'];?>">
    <input type="text" id="stId<?php echo $i;?>" value="<?php echo $stValue[0]['stId'];?>">
    <td><input type="checkbox" class="checkboxForOperations" value="<?php echo $i;?>" onclick="checkBoxForOperations(this)"></td>
</tr>
<?php
}
?>
</table>

JS

var checkboxArrayForOperations = []; // global array
function checkBoxForOperations(obj){
    var checkboxValue =  obj.value;
    if(obj.checked) {
        checkboxArray = [];
        checkboxArray["stName"] = $('#stName'+checkboxValue).val();
        checkboxArray["stId"] = $('#stId'+checkboxValue).val();
        checkboxArrayForOperations.push(checkboxArray);

    } else {
        var itemArrayForRemoval = [];
        itemArrayForRemoval["stName"] = $('#stName'+checkboxValue).val();
        itemArrayForRemoval["stId"] = $('#stId'+checkboxValue).val();
        var indexItemArrayForRemoval = index(itemArrayForRemoval);

        checkboxArrayForOperations = checkboxArrayForOperations.filter( function( el ) {
          return !(JSON.stringify(el) in itemArrayForRemoval);
        } );

    }
    console.log(checkboxArrayForOperations);
} 

function index(arr) {
    return arr.reduce(function(acc, item){
        return acc[JSON.stringify(item)] = item, acc
    }, {})    
}

On uncheck I want to remove the elements (added as array) corresponding to that unchecked row. I'm referring this answer. But the array is not getting removed from checkboxArrayForOperations. The array looks like shown in JSFiddle

What am I doing wrong? Can anyone help me to fix this. Thanks in advance.

Are you basically trying to add the value of the checkbox to the array when you click a checkbox and then remove it when you uncheck it? — Graham S., Jul 25 '17 at 13:41
@GrahamS. I'm saving the stname and stid values corresponding to checked row to the array. — Jenz, Jul 25 '17 at 13:42
Cool, and you're ultimately trying to send all the checked data to the server, right? — Graham S., Jul 25 '17 at 13:45
@GrahamS..Yes. On unchecking I want to delete the data corresponding to that row if it was already added (already checked). — Jenz, Jul 25 '17 at 13:46

score 2 · Accepted Answer · answered Jul 25 '17 at 14:19

I'd suggest to change your table format, if it's possible. Moreover, you don't have an array of array, and so I'd suggest you to consider an array of objects.

A possible solution could be:

var checkboxArrayForOperations = []; // global array
function checkCheckBoxForOperations(obj) {
    var checkboxValue = obj.value;
    if (obj.checked) {
        checkboxArray = [];
        checkboxArrayForOperations.push({"stName":  $('#stName' + checkboxValue).val(),
                "stId": $('#stId' + checkboxValue).val()});

    } else {
        var itemArrayForRemoval = {"stName":  $('#stName' + checkboxValue).val(),
                "stId": $('#stId' + checkboxValue).val()};

        checkboxArrayForOperations = checkboxArrayForOperations.filter(function (el, index) {
            return JSON.stringify(el) != JSON.stringify(itemArrayForRemoval);
        });

    }
    console.log(checkboxArrayForOperations);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tbody>
    <tr>
        <td>
            <input type="text" id="stName1" value="1">
        </td>
        <td>
            <input type="text" id="stId1" value="1">
        </td>
        <td><input type="checkbox" class="checkboxForOperations" value="1" onclick="checkCheckBoxForOperations(this)"></td>
    </tr>
    <tr>
        <td>
            <input type="text" id="stName2" value="2">
        </td>
        <td>
            <input type="text" id="stId2" value="2">
        </td>
        <td><input type="checkbox" class="checkboxForOperations" value="2" onclick="checkCheckBoxForOperations(this)"></td>
    </tr>
    <tr>
        <td>
            <input type="text" id="stName3" value="3">
        </td>
        <td>
            <input type="text" id="stId3" value="3">
        </td>
        <td><input type="checkbox" class="checkboxForOperations" value="3" onclick="checkCheckBoxForOperations(this)"></td>
    </tr>
    </tbody>
</table>

score 0 · Answer 2 · answered Jul 25 '17 at 13:49

Have you looked in the console what might be wrong, I can see this:

index.html:41 Uncaught ReferenceError: checkBoxForOperations is not defined at HTMLInputElement.onclick

Try renaming in the HTML to "checkCheckBoxForOperations" instead of "checkBoxForOperations".

score 0 · Answer 3 · answered Jul 25 '17 at 14:08

You can use object literal instead of array to assign a key as identifier to remove the item:

var checkboxArrayForOperations = {}; // global object
function checkBoxForOperations(obj){
    var checkboxValue =  obj.value;
    if(obj.checked) {
        var checkboxArray = {};
        checkboxArray["stName"] = $('#stName'+checkboxValue).val();
        checkboxArray["stId"] = $('#stId'+checkboxValue).val();
        checkboxArrayForOperations["stId"] = checkboxArray;

    } else {
        var itemArrayForRemoval = $('#stId'+checkboxValue).val();
        if(checkboxArrayForOperations.hasOwnProperty(itemArrayForRemoval)){
           delete checkboxArrayForOperations[itemArrayForRemoval];
        }    
    }
}

And if you still need values in array, you can use below code:

var finalArray = [];
    for(var i in checkboxArrayForOperations){
        finalArray[finalArray.length] = checkboxArrayForOperations[i];
    }

..I can't assign any key as identifier to the array as both stid and stname are not unique. — Jenz, Jul 25 '17 at 14:14

Removing array from another array based on checkbox check

3 Answers3