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.

I should have mentioned that the $f is generated by PHP loop for each set of two will have a new data-index id — Patrick McCarthy
– Patrick McCarthy, Commented Oct 4, 2018 at 10:00
What's the actual issue? It seems like using map() and the actual index() of the parent element may be a better solution over outputting a static value in each element from the server. — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2018 at 10:01
It gives me the response Cannot set property 'column_value_one' of undefined — Patrick McCarthy
– Patrick McCarthy, Commented Oct 4, 2018 at 10:03

Eddie · Accepted Answer · 2018-10-04 10:03:41Z

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'>

T.J. Crowder · Accepted Answer · 2018-10-04 10:10:19Z

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

@PatrickMcCarthy - Just added a second one as well. (And unless you need it for something else, there's no need for data-index.)

Collectives™ on Stack Overflow

How to structure javascript array

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related