將輸入中的數據值保存到多維數組中

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是items並且＃services_hidden.val（）中的兩個值（以逗號分隔）應創建一個key：value對。

要實現此目的，我必須對代碼進行哪些更改？

Answer 1

循環遍歷拆分數組，但遞增2除外。 這樣，每次迭代， 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);
}

如果要支持較舊的瀏覽器，請用上面的var替換let 。 這是一個演示（隨着您更改<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()做到這一點

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

Answer 3

我建議使用Array#forEach ，因為它訪問每個元素並對其進行處理。

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

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

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訪問該值。