動的入力を使用してフォームデータをJSONにシリアル化します

Question

フォームデータ（名前配列）をシリアル化しようとしていますが、配列の最後のオブジェクトのみをシリアル化できます。私は動的にフォームフィールドのセットを追加することができます。そして、私がsubmitをクリックすると、配列内に新しい（最後の）オブジェクトだけが追加されます。私はこれを行うためにさまざまな方法を試してきました。これは私が来た最も近いものです。ここに遊び場のコード - http://www.bootply.com/pv7fFLC1uJがあります。私が見たいものの例：

{ 
    timeZonePicker: "-7", 
    start: "09:00", 
    end: "17:00", 
    content: "San Francisco" 
} 
{ 
    timeZonePicker: "-3", 
    start: "09:00", 
    end: "17:00", 
    content: "São Paulo" 
} 

HTML

<form class="form-inline fields_wrapper"> 
    <select class="form-control timeZonePicker" name="timeZonePicker[]" id="timeZoneId"> 
     <option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option>...... 
    </select> 
    <input type="time" class="form-control start" name="start[]" value=""> 
    <input type="time" class="form-control end" name="end[]" value=""> 
    <input type="text" class="form-control content" name="content[]" value=""> 
</form> 

jQueryの

$.fn.serializeObject = function(options) { 
    var data = $(this).serializeArray(), obj = {}; 
    $.each(data, function(i, el) { 
     console.log(data); 
     var key = el.name; 
     //remove the brackets from each html name array 
     if (key.slice(-1) == "]") { 
      key = key.slice(0,-2); 
     } 
     if (el.name in options) { 
      obj[options[key]] = obj[options[key]] || {}; 
      obj[options[key]][key] = el.value; 
     } 
     else { 
      obj[key] = el.value; 
     } 
    }); 
    return obj; 
}; 

Answer 1

あなたが作成し、配列を返すされていません。あなたのオブジェクトのプロパティは、それぞれの各反復で上書き取得し、あなただけの

試し（未テスト）最後の繰り返しである1つのオブジェクトを返す：あなたは、各のラッパーを与えた場合

$.fn.serializeObject = function(options) { 
    var data = $(this).serializeArray(), 
     // results array 
     res = []; 
    $.each(data, function(i, el) { 

     var obj={} 

     console.log(data); 
     var key = el.name; 
     //remove the brackets from each html name array 
     if (key.slice(-1) == "]") { 
      key = key.slice(0,-2); 
     } 
     if (el.name in options) { 
      obj[options[key]] = obj[options[key]] || {}; 
      obj[options[key]][key] = el.value; 
     } 
     else { 
      obj[key] = el.value; 
     } 

     res.push(obj) 
    }); 
    // return array instead of the single object 
    return res; 
}; 

全体のことはずっと簡単になりますデータの行を共通のクラスに置き換えて、それらをループせずに、代わりに独自のオブジェクトを作成します。serializeArray()

Answer 2

charlietflは、配列ではなくただ一つのオブジェクトを返しています。

あなたがやっているやり方は、あなたが同時にフォームにあるすべてのオブジェクトを繰り返し処理することです。その道を踏み出すには、オブジェクトを1つ作成したときにそのオブジェクトを配列に追加できるようにする必要があります。あなたはシンプルな何かに問題を減らすことができます

//build the json objects for each set of form fields 
$.fn.serializeObject = function(options) { 
    var data = $(this).serializeArray(), obj = {}, all = []; 
    $.each(data, function(i, el) { 
     var key = el.name; 
     //remove the brackets from each html name array 
     if (key.slice(-1) == "]") { 
      key = key.slice(0,-2); 
     } 
     if (el.name in options) { 
      obj[options[key]] = obj[options[key]] || {}; 
      obj[options[key]][key] = el.value; 
     } 
     else { 
      obj[key] = el.value; 
     } 

     if ((i + 1) % Object.keys(options).length == 0) { 
     all.push(obj); 
     obj = {}; 
     } 
    }); 
    return all; 
};