複数のオブジェクトの配列に入力フィールドの値を取得する方法

Question

複数の入力フィールドを持つフォームがあるので、そのフォームの値を取得し、以下に示すようにJSONオブジェクトに渡す必要があります。各フィールドは配列内にobjectを持ちます。複数のフィールドをすべてオブジェクトの配列として渡すにはどうすればいいですか（フォームで複数のフィールドを追加することができます）

私はすべての値を取得するためにJavaScriptとjQueryを使用しています。クリックイベントで

<div class="info"> 
<div class="field"> 
    <label> field 1 </label> 
    <input placeholder="Name" class="name" type="text"> 
    <input placeholder="email" class="email" type="text"> 
    <input placeholder="Address" class="address" type="text"> 
</div> 
<div class="field"> 
    <label> field 2</label> 
    <input placeholder="Name" class="name" type="text"> 
    <input placeholder="email" class="email" type="text"> 
    <input placeholder="Address" class="address" type="text"> 
</div> 
<div class="field"> 
    <label> field 3 </label> 
    <input placeholder="Name" class="name" type="text"> 
    <input placeholder="email" class="email" type="text"> 
    <input placeholder="Address" class="address" type="text"> 
</div> 
<div class="field"> 
    <label> field 4 </label> 
    <input placeholder="Name" class="name" type="text"> 
    <input placeholder="email" class="email" type="text"> 
    <input placeholder="Address" class="address" type="text"> 
</div> 
</div> 

は

{ 
    "info": [ 
    { 
     "Name": "string 1", 
     "email": "this", 
     "Address": "that" 
    }, 
    { 
     "Name": "string 2", 
     "email": "this", 
     "Address": "that" 
    } 
    ] 
} 

は、私は別の分野での入力のそれぞれから値を取得しようとした、フォームの値とのようになります。最終的にJSONオブジェクトを取得します。どのように私は

var nameInput = document.getElementsByClassName("name"), 

     names = [].map.call(nameInput, function(input) { 
     return input.value; 
     }); 

しかし、オブジェクトに電子メールやアドレスフィールドを追加し、配列にマッピングするか、

Answer 1

これは動作するはずです。変数formDataには、必要な構造があります。

このコードでは、キー"info"は常に同じであると仮定しているため、常に.infoのように見えます。

var fieldsValues = []; 
 

 
$(".info .field").each(function(index, field) { 
 
    var fieldData = {}; 
 
    $(field).find("input").each(function(index, input) { 
 
    fieldData[input.placeholder] = input.value; 
 
    }); 
 

 
    fieldsValues.push(fieldData); 
 
}); 
 

 
var formData = {info: fieldsValues}; 
 
console.log(formData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="info"> 
 
    <div class="field"> 
 
    <label> field 1 </label> 
 
    <input placeholder="Name" class="name" type="text" value="some name 1"> 
 
    <input placeholder="email" class="email" type="text" value="some email 1"> 
 
    <input placeholder="Address" class="address" type="text" value="some address 1"> 
 
    </div> 
 
    <div class="field"> 
 
    <label> field 2</label> 
 
    <input placeholder="Name" class="name" type="text"> 
 
    <input placeholder="email" class="email" type="text"> 
 
    <input placeholder="Address" class="address" type="text"> 
 
    </div> 
 
    <div class="field"> 
 
    <label> field 3 </label> 
 
    <input placeholder="Name" class="name" type="text"> 
 
    <input placeholder="email" class="email" type="text"> 
 
    <input placeholder="Address" class="address" type="text"> 
 
    </div> 
 
    <div class="field"> 
 
    <label> field 4 </label> 
 
    <input placeholder="Name" class="name" type="text"> 
 
    <input placeholder="email" class="email" type="text"> 
 
    <input placeholder="Address" class="address" type="text"> 
 
    </div> 
 
</div>

Answer 2

はこのような何かを試してみてください：

var result = {"info":[]}; 
    $(".info .field").each(function() { 
     var info = {}; 
     $(this).children("input").each(function() { 
      eval("info." + $(this).attr("placeholder") + "='" + $(this).val()+"'"); 
     }); 
     result.info.push(info); 
    });