How to structure javascript array

Question

I have a dynamic form where you can click a button and a new form row is added to the form. The form entry looks like this:

<input type='text' class='custom' data-index='".$f."' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='".$f."' name='column_value_two' value='2'>

For example, I add 3 lines of the above and data-index is 0 through 3. I try to process it by doing the following:

var data = [];
$(".custom").each(function() {
    var index = parseInt($(this).attr('data-index'));
    data[index][$(this).attr("name")] = $(this).val();
});

I am trying to have an end result of:

data[0]['column_value_one'] = 1;
data[0]['column_value_two'] = 2;
data[1]['column_value_one'] = 1;
data[1]['column_value_two'] = 2;

I only usually write PHP, hence me laying out the array as per above. But this would be a Javascript/Jquery array not PHP.

I would appreciate any help here.

Answer 1

You need to init the data[index] to {} if the index does not exist.

data[index] = data[index] || {}; 

Like:

 var data = []; $(".custom").each(function() { var index = parseInt($(this).attr('data-index')); data[index] = data[index] || {}; data[index][$(this).attr("name")] = $(this).val(); }); console.log(data); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class='custom' data-index='0' name='column_value_one' value='1'> <input type='text' class='custom' data-index='0' name='column_value_two' value='2'> <input type='text' class='custom' data-index='1' name='column_value_one' value='1'> <input type='text' class='custom' data-index='1' name='column_value_two' value='2'> <input type='text' class='custom' data-index='2' name='column_value_one' value='1'> <input type='text' class='custom' data-index='2' name='column_value_two' value='2'> 

Answer 2

It sounds like you want an array of objects:

data = [
    {column_value_one: 1, column_value_two: 2},
    // ...
];

In that case, since the second input follows the first, you could do:

var data = $("input[name=column_value_one]").map(function() {
    return {column_value_one: this.value, column_value_two: $(this).next().val()};
}).get();

Live Example:

 var data = $("input[name=column_value_one]").map(function() { return {column_value_one: this.value, column_value_two: $(this).next().val()}; }).get(); console.log(data); 

 <input type='text' class='custom' data-index='0' name='column_value_one' value='11'> <input type='text' class='custom' data-index='0' name='column_value_two' value='12'> <input type='text' class='custom' data-index='1' name='column_value_one' value='21'> <input type='text' class='custom' data-index='1' name='column_value_two' value='22'> <input type='text' class='custom' data-index='2' name='column_value_one' value='31'> <input type='text' class='custom' data-index='2' name='column_value_two' value='32'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Or if you may have something in-between them, use two jQuery objects:

var ones = $("input[name=column_value_one]");
var twos = $("input[name=column_value_two]");
var data = ones.map(function(index) {
    return {column_value_one: this.value, column_value_two: twos.eq(index).val()};
}).get();

 var ones = $("input[name=column_value_one]"); var twos = $("input[name=column_value_two]"); var data = ones.map(function(index) { return {column_value_one: this.value, column_value_two: twos.eq(index).val()}; }).get(); console.log(data); 

 <input type='text' class='custom' data-index='0' name='column_value_one' value='11'> <input type='text' class='custom' data-index='0' name='column_value_two' value='12'> <input type='text' class='custom' data-index='1' name='column_value_one' value='21'> <input type='text' class='custom' data-index='1' name='column_value_two' value='22'> <input type='text' class='custom' data-index='2' name='column_value_one' value='31'> <input type='text' class='custom' data-index='2' name='column_value_two' value='32'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

In both cases, there's no need for data-index (for this; maybe you need it for something else).