javascript - Laravel 编辑更新 JSON 数组并使用 JavaScript 删除特定输入

Question

如何将保存在数据库中的 JSON 数组加载到编辑表单输入字段？

这是我的创建表单的样子

这是表单代码

        <div class="card">
        <h5 class="card-header">
            Manage Extras
        </h5>


        <div class="card-body">

            <div class="optionBox">
                <div class="block main">
                    <div class="form-row pb-2">
                        <div class="col">
                          <input type="text" class="form-control" name="extras_name[]" value="" placeholder="Name">
                        </div>
                        <div class="col">
                          <input type="text" class="form-control" name="extras_price[]" placeholder="Price">
                        </div>
                        <div class="col">
                            <button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                        </div>
                    </div>
                    <div class="block mt-2 ">
                        <button type="button" class="add btn btn-success">Add Extras</i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Add Extra这是输入字段和删除按钮的脚本

<script>
    $('.add').click(function() {
        $('.block:last').before('<div class="form-row pb-2"><div class="col"><input type="text" class="form-control" name="extras_name[]" placeholder="Name"></div><div class="col"><input type="text" class="form-control" name="extras_price[]" placeholder="Price"></div><div class="col"><button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button></div></div>');
    });

    $('.optionBox').on('click','.remove',function() {
        $(this).parent().parent().remove();
    });
</script>

这是它在数据库中的保存方式

这是edit function在Controller

public function edit(CustomProduct $customProduct)
{

    $data = [
        'customProduct'=>$customProduct,
    ];

    return view('manage.custom-products.edit')->with($data);
}

我能够使用如下的 foreach 将数据加载到表单中

             <div class="row">
                <div class="col">
                    <strong>Names</strong>
                    @foreach ($customProduct['extras_name'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
                <div class="col">
                    <strong>Prices</strong>
                    @foreach ($customProduct['extras_price'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
            </div>

这就是它的样子

我只想在编辑时将 json 数据加载到输入字段中，并且应该能够通过单击删除图标来删除太平洋输入，

我怎样才能做到这一点，请帮帮我

标签： javascriptjqueryarraysjsonlaravel