Home » Jquery » Combining two form values in a loop using jquery

Combining two form values in a loop using jquery

Posted by: admin February 22, 2020 Leave a comment

Questions:

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.

enter image description here

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

How to&Answer:

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>

Answer:

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

Answer:

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);

Answer:

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.