Combining two form values in a loop using jquery

Question

Hi guys I got a tricky question for me.

I have this form in which i want them to combine into one array when i looped all the form fields that is located in a table header.

This is the loop i used to get all the data of the fields

$('#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');
                }

            });

This code provide me the following output

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

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

what i want to accomplish is to combine them since they have the same col or they are located in the same table header so the output will look like this

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

any idea how can I solve this one? been stuck here for such a long time. Thanks

freedomn-m · Accepted Answer · 2020-02-20T11:50:52.070

You can use $.extend to combine multiple objects with arbitrary properties.

Example code (without html inputs, which you can fit in inside the 'iteration' part)

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>

score 0 · Answer 2 · answered Feb 20 '20 at 11:38

0

You have to use merge

http://jsfiddle.net/jj7XZ/

or directlly see similar

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

answered Feb 20 '20 at 11:38

Ravi

319
2
9

You *have to* use merge? Do you? I think you mean "you *can* use merge" – freedomn-m Feb 20 '20 at 11:50

score 0 · Answer 3 · answered Feb 20 '20 at 11:41

You have 2 inputs, so

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

runs twice, once for each input field, pushing input into filterForm twice. You need to push once.

Create one function, that fills input object, then push it when you are done.

Something like this:

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

filterForm.push(input);

Khushbu · Answer 4 · 2020-02-20T11:49:34.150

Just a modification to your code to achieve what you want:

$('#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');
                }

            });

Explanation:

Before pushing new object to array, we are checking if there is any object with same col property in array? If no, then we push it, otherwise we set to property for found object in array.

Combining two form values in a loop using jquery

4 Answers4