Объединение двух значений формы в al oop с использованием jquery

Question

Привет, ребята, у меня каверзный вопрос для меня.

У меня есть эта форма, в которой я хочу, чтобы они объединялись в один массив, когда я зацикливал все поля формы, расположенные в заголовке таблицы.

Это l oop i, используемый для получения всех данных полей

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

что я хочу сделать sh, это объединить их, так как они имеют одинаковое 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

У вас есть 2 входа, поэтому

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

запускается дважды, один раз для каждого поля ввода, дважды толкая ввод в filterForm. Вам нужно pu sh один раз.

Создать одну функцию, которая заполняет входной объект, затем pu sh это когда вы закончите.

Примерно так:

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

filterForm.push(input);

Answer 3

Просто модификация вашего кода для достижения того, что вы хотите:

$('#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 свойством в массиве? Если нет, то мы пу sh это, в противном случае мы устанавливаем в свойство для найденного объекта в массиве.

Answer 4

Вы должны использовать слияние

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