如何构造javascript数组

Question

我有一个动态表单，您可以在其中单击一个按钮，然后将一个新的表单行添加到表单中。表单条目如下所示：

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

例如，我添加了上面的 3 行，data-index 是 0 到 3。我尝试通过执行以下操作来处理它：

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

我正在尝试得到以下结果：

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

我通常只编写 PHP，因此我按照上面的方式布置数组。但这将是一个 Javascript/Jquery 数组而不是 PHP。

我会很感激这里的任何帮助。

Answer 1

如果索引不存在，则需要将data[index] 初始化为{}。

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

喜欢：

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

听起来你想要一个对象数组：

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

在这种情况下，由于第二个输入在第一个之后，您可以这样做：

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

现场示例：

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>

或者，如果您可能在它们之间有一些东西，请使用两个 jQuery 对象：

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>

在这两种情况下，都不需要data-index（为此；也许您需要它来做其他事情）。