根据输入值创建复杂的多维数组

Question

我想准备并保存多维数组以通过ajax发送它。我有这个HTML例如：

<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox"  class="itArray" value="id,2,name,Max,gender,male" />

我希望实现每个逗号（,）在多维数组中分离key:value对并根据它应该创建数组的逗号数量（例如：5 commas = 3 key:value pairs这个例子）。

此HTML示例中的数组应如下所示：

（对不起，如果我放错了括号，我只是想证明我想要实现的目标，而且我不知道正确的语法）

这就是我到目前为止所做的：

var itemsArray;
$('.itArray').each(function(key, value) {
    console.log(itemsArray);
    val = $(value).val();
    console.log("val " + val);
    var ar = val.split(',');
    var itemsArray = { // new each loop here with i % 2 ?  }

        // I don't know how to proceed here

    }
});

我想我必须使用i % 2来分隔每个键：值对？但我不知道如何在这个具体案例中做到这一点。我感谢任何帮助。

编辑：添加图片以显示我希望它的外观。对不起，不得不隐藏合理的数据。

Answer 1

您可以使用：

var data = {items: []};
$(".itArray").each(function(key, item) {
    var i = 0;
    var d = item.value.split(",").reduce(function(memo, current, index, arr) {
        index % 2 === 0 ? memo.push({}) : memo[i++][arr[index-1]] = current;
        return memo;
    },[]);
    data.items.push(d);
});

console.log(data);

var data = {items: []};
$(".itArray").each(function(key, item) {
    var i = 0;
    var d = item.value.split(",").reduce(function(memo, current, index, arr) {
        index % 2 === 0 ? memo.push({}) : memo[i++][arr[index-1]] = current;
        return memo;
    },[]);
    data.items.push(d);
});

console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox"  class="itArray" value="id,2,name,Max,gender,male" />

Answer 2

您可以使用input循环循环每个each，并在reduce()的帮助下添加到对象。在js中也没有多维数组，但你可以使用对象。

var result = {}
$('.itArray').each(function(i) {
  var num = 0
  var val = $(this).val().split(',');
  result[i] = val.reduce(function(r, e, i) {
    if (i % 2) r[num++] = {[val[i - 1]]: e}
    return r;
  }, {})
})

document.body.innerHTML = '<pre>' + JSON.stringify(result, 0, 4) + '</pre>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox" class="itArray" value="id,2,name,Max,gender,male" />

Answer 3

在这里，您可以使用纯JavaScript获取checked复选框的键值。

var elements = document.querySelectorAll('.itArray:checked');

var kvArray = [];
elements
  .forEach(el => {
    var kvs = el.value.split(',');
    var result = [];
    for (var i = 0; i < kvs.length; i += 2)
      result.push({
        [kvs[i]]: kvs[i + 1]
      });
    kvArray.push(result);
  });

console.log(JSON.stringify(kvArray, 0, 4));

<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" checked/>
<input type="checkbox" class="itArray" value="id,2,name,Max,gender,male" />
<input type="checkbox" class="itArray" value="id,3,name,Vaia,gender,female" checked/>