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

循环分割数组，除了增加两倍。这样，每次迭代，itemsArray[i]都是关键，itemsArray[i + 1]是值。

for (let i = 0; i < itemsArray.length; i += 2) {
    let key = itemsArray[i];
    let value = itemsArray[i + 1];
    dataArray[0].items.push(key + ':' + value);
}

如果您想支持旧浏览器，请将let替换为上面的var。这是一个演示（结果将在您更改<input>时实时更新）：

var input = document.getElementById('services_hidden');
var pre = document.getElementById('result');

function update() {
  var itemsArray = input.value.split(',');

  var dataArray = [
    {
      items: []
    }
  ];

  for (var i = 0; i < itemsArray.length; i += 2) {
    var key = itemsArray[i];
    var value = itemsArray[i + 1];
    dataArray[0].items.push(key + ':' + value);
  }

  pre.textContent = JSON.stringify(dataArray, null, 4);
}

input.addEventListener('input', update);
update();

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

Answer 2

您可以使用reduce()执行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我建议使用Array#forEach，因为它会访问每个元素并对其进行处理。

＆＃13;

var val = document.getElementById('services_hidden').value,
    data_array = [{ items: [] }];
 
data_array[0].items ;
val.split(',').forEach(function(a, i) {
    var o = {};
    if (i & 1) {
        o[this.key] = a;
        data_array[0].items.push(o)
        return;
    }
    this.key = a;
}, { key: null });

document.body.innerHTML += '<pre>' + JSON.stringify(data_array) + '</pre>';

＆＃13;

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

＆＃13;

Answer 4

让我们坚持原始格式，尽可能简单：

var dataArray = [];
dataArray.push({ items: [] });

var items = "item1,value1,item2,value2,item3,value3"; // $('#services_hidden').val()
var itemsArray = items.split(",");

for (var i = 0; i < itemsArray.length; i+=2) {
  var item = itemsArray[i];
  var value = itemsArray[i+1];
  var itemObj = {};
  itemObj[item] = value;
  dataArray[0].items.push(itemObj);
}

console.log("dataArray " + JSON.stringify(dataArray));

唯一可能需要解释的是for (var i = 0; i < itemsArray.length; i+=2) {。为什么将i增加2？您在itemsArray中有6个项目，我们将向dataArray[0].items插入3个项目。我们不需要迭代6次。

["item1", "value1", "item2", "value2", "item3", "value3"]
    i       (i+1)      i       (i+1)      i       (i+1)

由于itemn和valuen彼此相邻，我们可以使用i来访问该项，并使用i+1来访问该值。

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

4 个答案: