使用jquery在一个循环中组合两个表单值

Question

大家好，我有一个棘手的问题。

我有一个表单，当我循环位于表头中的所有表单字段时，我希望它们组合成一个数组。

这是我用来获取所有字段数据的循环

$('#filterTable').find("table select, table input").each(function(key, value) {
                var name = $(this).attr('name');
                var input = {};

                if (this.value !== ''){
                     if (name === 'filter_select') {
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.filterSelect = $(this).val();
                     } else if (name === 'froms'){
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.from = $(this).val();
                     } else if (name === 'to'){
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.to = $(this).val();
                     }

                     if(layerId == "" && input)
                        layerId = input.layer_id;
                     filterForm.push(input);

                     previous_col = $(this).data('col');
                }

            });

这段代码为我提供了以下输出

0:
col: 2
layer_id: 139
from: "100"

1:
col: 2
layer_id: 139
to: "500"

我想要完成的是将它们组合起来，因为它们具有相同的 col 或者它们位于同一个表头中，因此输出将如下所示

0:
col: 2
layer_id: 139
from: "100"
to: "500"

知道如何解决这个问题吗？被困在这里这么久了。谢谢

Answer 1

您可以使用$.extend 组合具有任意属性的多个对象。

示例代码（没有 html 输入，您可以将其放入“迭代”部分）

var filterForm = [];

// previous iterations of the input loop popuplate filterForm array
filterForm.push({
  col: 2,
  layer_id: 139,
  from: "100"
});

// this iteration gets data from inputs (hardcoded here for simplicity/demo)
var input = {
  col: 2,
  layer_id: 139,
  to: "500"
};

// find if it's already in the array
var existing = filterForm.find(function(e) {
    return e.col == input.col && e.layer_id == input.layer_id;
});
// update existing item or add as a new item
if (existing != null)
    $.extend(existing, input);
else
    filterForm.push(input);

console.log(filterForm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

你必须使用合并

http://jsfiddle.net/jj7XZ/

或者直接看类似的

https://stackoverflow.com/questions/22208966/merging-of-two-arrays-store-unique-elements-and-sorting-in-jquery

https://stackoverflow.com/questions/38807704/trying-to-combine-all-value-from-jquery-each-function

Answer 3

你有 2 个输入，所以

$('#filterTable').find("table select, table input").each(function...

运行两次，每个输入字段一次，将输入推送到 filterForm 两次。您需要推送一次。

创建一个函数，填充输入对象，完成后将其推送。

类似这样的：

input.col = $('#input1').data('col');
input.layer_id = $('#input1').data('layer');
input.to = $('#input1').val();
input.from = $('#input2').val();

filterForm.push(input);

Answer 4

只需修改您的代码即可实现您想要的效果：

$('#filterTable').find("table select, table input").each(function(key, value) {
                var name = $(this).attr('name');
                var input = {};

                if (this.value !== ''){
                     if (name === 'filter_select') {
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.filterSelect = $(this).val();
                     } else if (name === 'froms'){
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.from = $(this).val();
                     } else if (name === 'to'){
                         input.col = $(this).data('col');
                         input.layer_id = $(this).data('layer');
                         input.to = $(this).val();
                     }

                     if(layerId == "" && input)
                        layerId = input.layer_id;
                     if (name === 'to')
                     {
                       var exist = filterForm.map(f => f.col).indexOf(input.col); 
                       if(exist == -1)
                       {
                         filterForm.push(input);
                       } 
                       else
                       {
                         filterForm[exist].to = $(this).val();
                       }                   

                    }
                    else
                    {
                       filterForm.push(input);
                    }


                     previous_col = $(this).data('col');
                }

            });

说明：

在将新对象推送到数组之前，我们会检查数组中是否有任何具有相同 col 属性的对象？如果不是，则推送它，否则我们将 to 属性设置为在数组中找到的对象。