Question

我具有以下JSON结构：

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

以及以下HTML表（代表JSON）：

当用户单击“删除” button时，我需要在JSON上删除相应的iten。当用户单击时，我可以捕获key，因此需要使用key值将其删除。

假设用户在“鼠标”上单击“删除” button，那么JSON需要以这种方式返回：

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

我该怎么做？

表格的HTML：

<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：

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从表格中删除行：

$("#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

遍历对象数组，找到匹配的对象，该对象具有键作为单击“删除”按钮时捕获的键值。

 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

最简单的方法是将一些ID关联到按钮，以响应条目ID。单击删除按钮后，您可以从按钮中提取ID，并且知道要删除的行。

Answer 3

您说您可以捕获键，所以我假设您已经有了某种可以接收该键的点击处理程序功能。从那里开始，最好的方法可能是创建一个新数组，以过滤出匹配的元素，然后用新数组替换旧数组。（通常被认为是比使用.splice之类的方法来改变数组位置更好的做法）

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

Answer 4

您可以使用create_all()找到索引（索引将在第一个匹配项上返回，因此如果您的“键”值是唯一的，这是一种优化的方式）

Array.findIndex

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

4 个答案: