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

。

その後、ここにあなたが何ができるかです：

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つの要素のうち、2つの要素があるためです。

trの要素には4つのinput要素があるため、2つ目の要素は両方とも4要素の配列を返します。しかし、この4つの要素の配列は、reduceを介して4つのプロパティを持つオブジェクトに変換され、inputsを反復し、それぞれのプロパティを空のものとして開始するオブジェクトに追加します（{}）。

replace(/\[.*\]/,'')コールは、名前属性値から括弧で囲まれた部分を削除します。

Answer 2

あなたが探している値に対応する各オブジェクトにキーを追加するためにArray.prototype.map()を使用することができます：あなたはtbody要素がtable要素の子であることを確認する必要があり

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"