javascript - 将输入的数据值保存到多维数组中

Question

var dataArray = [];
dataArray.push({ items: [] });
var items = $('#services_hidden').val();
var itemsArray = items.split(",");
console.log("itemsArray: " + itemsArray);
$.each( itemsArray, function( index, value ){
    dataArray[0].items.push(value);
});
console.log("dataArray " + JSON.stringify(dataArray));

通过这种方式，我想将数据保存在一个读取输入值的数组中，如下所示:

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />

所以可以有多个项目分配给一个特定的值。目前它看起来是这样的，这是错误的，因为它都保存在 items 中，彼此没有分开:

dataArray [{"items":["item1","value1","item2,"value2"]}]

但我想要这个(我希望我能正确显示这个):

dataArray [{"items":{"item1:value1"},{"item2:value2"}}]

所以父项是 items，#services_hidden.val() 中用逗号分隔的每两个值应该创建一个键值对。

我必须更改我的代码才能实现此目标吗？

Answer 1

您可以使用 reduce()做这个

//Select element by id and get value
var val = document.getElementById('services_hidden').value;
//Split value at , and create array
var ar = val.split(',');

//Use reduce to return result in data_array variable
var data_array = ar.reduce(function(r, e, i) {
  //If index of element is odd number, add to result, element of array with previous index number and then current element
  if (i % 2) r[0].items = (r[0].items || []).concat({
    [ar[i - 1]]: e
  });
  //return result array.
  return r;
}, [{}]);

//Add result to HTML
document.body.innerHTML += '<pre>' + JSON.stringify(data_array) + '</pre>';

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />