使用Javascript爲名稱添加多個元素到一個JSON對象

Question

我有一個函數，它接受了例如10個值文本框的值，並將它們放入一個JSON字符串中，然後存儲在一個cookie中。我沒有任何問題，如果我在抓取元素「assignment []」時硬編碼問題，但我還想爲其添加其他文本框值，例如「quizzes []」，作爲示例爲了有一個長字符串，我會然後轉換爲JSON字符串。

function setObject(name, score) 
{ 
    this.name = name; 
    this.score = score; 
} 

function setCookie() 
{ 
    var cookieName = "assignments"; 
    var cookieValue = document.getElementsByName("assignments[]"); 

    var arr = []; 
    for(var i=0;i<cookieValue.length;i++) 
    { 
     var setObj = new setObject(cookieName + i, cookieValue[i].value); 
     arr.push(setObj); 
    } 
    document.cookie = JSON.stringify(arr); 
} 

上面這段代碼的工作只是罰款只是「名稱[]」文本框，但我希望能夠將其他元素添加到同一個JSON字符串。

我的電流輸出應該是這樣的：

[{"name":"assignments0","score":"1"},{"name":"assignments1","score":"2"}, 
{"name":"assignments2","score":"3"},{"name":"assignments3","score":"4"}] 

我預期的輸出應該是這樣的，如果我能夠通過我的函數中添加不同的文本框數組：

[{"name":"assignments0","score":"22"},{"name":"assignments1","score":"19"}, 
{"name":"assignments2","score":"9"},{"name":"assignments3","score":"20"}, 
{"name":"quizzes0","score":"5"},{"name":"quizzes1","score":"9"}] 

在任何幫助正確的方向將不勝感激。

Answer 1

您可以指定所有輸入名稱陣列到陣列，並遍歷它，如下面的代碼。

var inputs = ["assignments", "quizzes", "three", "four"]; 

function setObject(name, score) { 
 
    this.name = name; 
 
    this.score = score; 
 
} 
 

 
function setCookie() { 
 

 
    var inputs = ["assignments", "quizzes", "three", "four"]; 
 
    var arr = []; 
 

 
    for (var i = 0; i < inputs.length; i++) { 
 

 
    var cookieName = inputs[i]; 
 
    var cookieValue = document.getElementsByName(inputs[i] + '[]'); 
 

 
    for (var j = 0; j < cookieValue.length; j++) { 
 
     var setObj = new setObject(cookieName + j, cookieValue[j].value); 
 
     arr.push(setObj); 
 
    } 
 
    
 
    } 
 

 
    result.innerHTML = JSON.stringify(arr, null, 2); 
 
    
 
    //document.cookie = JSON.stringify(arr); 
 

 
} 
 
setCookie();

<input name="assignments[]" value="1" /> 
 
<input name="assignments[]" value="2" /> 
 
<input name="assignments[]" value="3" /> 
 

 
<input name="quizzes[]" value="11" /> 
 
<input name="quizzes[]" value="22" /> 
 
<input name="quizzes[]" value="33" /> 
 

 
<input name="three[]" value="111" /> 
 
<input name="three[]" value="222" /> 
 
<input name="three[]" value="333" /> 
 

 
<input name="four[]" value="1111" /> 
 
<input name="four[]" value="2222" /> 
 
<input name="four[]" value="3333" /> 
 

 
<pre id="result"></pre>

輸出

[ 
    {"name": "assignments0","score": "1"}, 
    {"name": "assignments1","score": "2"}, 
    {"name": "assignments2","score": "3"}, 

    {"name": "quizzes0","score": "11"}, 
    {"name": "quizzes1","score": "22"}, 
    {"name": "quizzes2","score": "33"}, 

    {"name": "three0","score": "111"}, 
    {"name": "three1","score": "222"}, 
    {"name": "three2","score": "333"}, 

    {"name": "four0","score": "1111"}, 
    {"name": "four1","score": "2222"}, 
    {"name": "four2","score": "3333"} 
] 

Answer 2

您可以使用querySelectorAll()與屬性選擇器來獲取所有的元素，如

function setObject(name, score) { 
 
    this.name = name; 
 
    this.score = score; 
 
} 
 

 
function setCookie() { 
 
    var els = document.querySelectorAll('input[name="assignments[]"],input[name="quizes[]"]'); 
 

 
    var arr = []; 
 
    for (var i = 0; i < els.length; i++) { 
 
    var setObj = new setObject(els[i].name.slice(0, -2) + i, els[i].value); 
 
    arr.push(setObj); 
 
    } 
 

 
    result1.innerHTML = JSON.stringify(arr, null, 2); 
 

 

 
    var arr = [].map.call(els, function(el) { 
 
    return new setObject(el.name.slice(0, -2) + i, el.value); 
 
    }); 
 
    result2.innerHTML = JSON.stringify(arr, null, 2); 
 
} 
 
setCookie();

<input name="assignments[]" value="1" /> 
 
<input name="assignments[]" value="2" /> 
 
<input name="assignments[]" value="3" /> 
 
<input name="assignments[]" value="4" /> 
 

 
<input name="quizes[]" value="1" /> 
 
<input name="quizes[]" value="2" /> 
 
<input name="quizes[]" value="3" /> 
 
<input name="quizes[]" value="4" /> 
 

 
<pre id="result1"></pre> 
 
<pre id="result2"></pre>

Answer 3

成全它的功能？

function getElementsArr(elementsName) { 
    var elements = document.getElementsByName(elementsName + "[]"); 

    var arr = []; 
    for(var i=0; i < elements.length;i++) 
    { 
     var setObj = new setObject(elementsName + i, elementss[i].value); 
     arr.push(setObj); 
    } 

    return arr; 
} 

function setCookie(elementNames) 
{ 
    var allElements = []; 
    for(var i = 0; i < elementNames.length; i++) { 
     allElements.push(getElementsArr(elementNames[i])); 
    } 

    document.cookie = JSON.stringify(allElements); 
} 

setCookie(['assignments', 'quizzes']);