如何將表單數組轉換爲JavaScript中的JSON？ （對象數組）？

Question

HTML：

<form id="products"> 
<tbody id="product-list"> 
    <tr> 
    <td><input type="hidden" name="type[]" value="jackets">jackets</td> 
    <td><input type="hidden" name="name[]" value="test1">test1</td> 
    <td><input type="hidden" name="color[]" value="red">red</td><td> 
    <input type="hidden" name="size[]" value="S">S</td> 
    </tr> 
    <tr> 
    <td><input type="hidden" name="type[]" value="jackets">jackets</td> 
    <td><input type="hidden" name="name[]" value="test2">test2</td> 
    <td><input type="hidden" name="color[]" value="blue">blue</td> 
    <td><input type="hidden" name="size[]" value="S">S</td> 
    </tr> 
</tbody> 
</form> 

JS：

JSON.stringify($("#products").serializeArray(); 

輸出：

[{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}] 

所需的輸出：

對象的數組，所以像這樣（只是一種視覺）

Object[0].type -> "jackets" 
Object[0].name -> "test1" 
Object[0].color -> "red" 
Object[0].size -> "S" 
Object[1].type -> "jackets" 
Object[1].name -> "test2" 
Object[1].color -> "blue" 
Object[1].size -> "S" 

理想情況下，我正在尋找解決方案如何做到這一點，以及爲了學習的邏輯。

Answer 1

你需要確保tbody元素是table元素的子元素。

然後，這裏是你能做什麼：

var arr = $("#product-list tr").get().map(function (tr) { 
 
    return $('input', tr).get().reduce(function (obj, input) { 
 
     obj[input.name.replace(/\[.*\]/,'')] = input.value; 
 
     return obj; 
 
    }, {}); 
 
}); 
 
console.log(JSON.stringify(arr, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="products"> 
 
<table> 
 
<tbody id="product-list"> 
 
    <tr> 
 
    <td><input type="hidden" name="type[]" value="jackets">jackets</td> 
 
    <td><input type="hidden" name="name[]" value="test1">test1</td> 
 
    <td><input type="hidden" name="color[]" value="red">red</td><td> 
 
    <input type="hidden" name="size[]" value="S">S</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="hidden" name="type[]" value="jackets">jackets</td> 
 
    <td><input type="hidden" name="name[]" value="test2">test2</td> 
 
    <td><input type="hidden" name="color[]" value="blue">blue</td> 
 
    <td><input type="hidden" name="size[]" value="S">S</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</form>

的get()方法將一個jQuery集合轉換爲普通數組，並第一次出現，那將是一個數組2個元素，因爲有兩個tr元素。

第二個將返回一個包含4個元素的數組，兩次，因爲兩個tr元素都有4個input元素。但是這個4個元素的數組通過reduce被轉換爲4個屬性的對象，它們遍歷這些inputs，並將它們中的每個元素的屬性添加到作爲空的對象（{}）開始的對象。

呼叫replace(/\[.*\]/,'')將從名稱屬性值中刪除括號內的部分。

Answer 2

您可以使用Array.prototype.map()在對應於您正在尋找的價值將每個對象添加一個關鍵：

var arr = [{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}]; 

var result = arr.map(function(elem){ 
    elem[elem.name.replace(/\W/g, '')] = elem.value; //adds key "type" with value "jackets" 
    return elem; 
}); 

result[0].jackets //"jackets"