如何使用 jQuery 通过键删除 JSON 中的 JSON？

Question

I have the following JSON structure:

[
    {"key":1,"idProduct":"Monitor","obsProduct":""},
    {"key":2,"idProduct":"Mouse","obsProduct":""},
    {"key":3,"idProduct":"Keyboard","obsProduct":""},
    {"key":4,"idProduct":"Processor","obsProduct":""}
]

And the following HTML table (representing the JSON):

When user click on "Remove" button , I need to remove the corresponding iten on JSON. When user click, I can capture the key , so I need to remove iten using the key value.

Assuming that the user click on "Remove" button on "Mouse", so, the JSON needs to return that way:

[
    {"key":1,"idProduct":"Monitor","obsProduct":""},
    {"key":3,"idProduct":"Keyboard","obsProduct":""},
    {"key":4,"idProduct":"Processor","obsProduct":""}
]

How can I do this?

HTML of table:

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="table-products">
            <thead style="background-color: #f2f2f2">
                <tr class="text-center">
                    <th style="width: 40%">Product</th>                     
                    <th style="width: 40%">Obs</th>
                    <th style="width: 20%">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="3">No iten!</td>
                </tr>
                <!-- Will be generated! -->
            </tbody>
        </table>
        </div>
    </div>
</div>

JS that generates the lines:

var i = 1;
var itensArray = [];
var nameProduct = $("input[name='nameProd']").val();
var obsProduct = $("input[name='obsProd']").val();

if(i <= 5)
{
    var newItem = '<tr class="itemRow"><td>' + nameProduct + '</td><td>' + obsProduct + '</td><td><button type="button" name="' + i + '" class="btn btn-outline-danger btn-sm" id="btnRemoveProduct"><i class="far fa-trash-alt"></i> Remove</button></td></tr>';
    if(i == 1) 
        $("#table-products tbody").html(newItem); 
    else
        $("#table-products tbody").append(newItem);

    var products = {
        key: i,
        idProduct: nameProduct,
        obsProduct: obsProduct
    };
    itensArray.push(products)
    var aux = JSON.stringify(itensArray);
    i++;
    console.log(aux);
}

JS that remove lines from table:

$("#table-products").on('click', '#btnRemoveItem', function(){
    var idProduct = $(this).attr("name");
    $(this).closest('tr').remove();
    toastr.success('Iten removed!');
    i--;
    if(i == 1)
    {
        var defaultItem = '<tr><td colspan="3">No iten added!</td></tr>';
        $("#table-products tbody").html(defaultItem);
    }

    /* I NEED TO PUT HERE THE CODE TO REMOVE ITEM FROM JSON */
});

Answer 1

Iterating through the array of objects and finding the matching object having key as the key value which is captured when clicking on remove button.

 var itensArray = [ {"key":1,"idProduct":"Monitor","obsProduct":""}, {"key":2,"idProduct":"Mouse","obsProduct":""}, {"key":3,"idProduct":"Keyboard","obsProduct":""}, {"key":4,"idProduct":"Processor","obsProduct":""} ]; //key is captured in a variable on click of remove button. var idProduct = 2; for (var i = 0; i < itensArray.length; i++) { var obj = itensArray[i]; if (obj.key === idProduct) { itensArray.splice(i, 1); } } console.log(itensArray);

Answer 2

The simplest way is to assing some id to button which responds entry id. While delete button is clicked you can extract ID from button and you know which row to delete.

Answer 3

You said you can capture the key, so I'm assuming you've got some kind of click handler function that's receiving that key. From there the best way to do it is probably to create a new array that filters out the element that matches, and replace the old array with the new. (Generally considered a better practice than mutating the array in place with something like .splice)

const capturedKey = event.target.value // or however you're capturing it
yourArray = yourArray.filter(obj => obj.key !== capturedKey)

Answer 4

You can find the index using Array.findIndex (It will return on the first match so it is an optimized way if your 'key' values are unique)

 const myArray = [ {"key":1,"idProduct":"Monitor","obsProduct":""}, {"key":2,"idProduct":"Mouse","obsProduct":""}, {"key":3,"idProduct":"Keyboard","obsProduct":""}, {"key":4,"idProduct":"Processor","obsProduct":""} ]; const idToDelete = 2; // retrieved via clicked btn const idx = myArray.findIndex( item => item.key == idToDelete ); if(idx != -1) { myArray.splice(idx, 1); } console.log(myArray)