根据输入值创建一个复杂的多维数组答案

【问题标题】：Create a complex multidimensional array depending on input values根据输入值创建一个复杂的多维数组
【发布时间】：2016-07-16 15:50:58
【问题描述】：

我想准备并保存一个多维数组以通过 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 来分隔每个键：值对？但我不知道在这种特定情况下如何做到这一点。感谢您的帮助。

编辑：添加图像以显示我希望它的外观。抱歉，必须隐藏敏感数据。

【问题讨论】：

可能，你的意思是每个项目都在这个结构中{ "id": "1", "name": "Alex", "gender": "male" }，对吧？
js中没有这种数据格式。如果您使用 php，请在您的数据上尝试 json_encode，看看您会得到什么。

标签： javascript jquery multidimensional-array

【解决方案1】：

您可以使用each 循环循环每个input，并在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" />

【讨论】：

嘿，你能再看看我的问题和我的形象吗？我使用了您的代码，但数组太多。我希望您通过我展示的图像理解它？
你可以得到这样的数据而不是jsfiddle.net/Lg0wyt9u/1044或者只是对象数组jsfiddle.net/Lg0wyt9u/1045但是js中没有[key => value]它必须是{key: value}

【解决方案2】：

你可以用这个：

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" />

【讨论】：

【解决方案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/>

【讨论】：