フォームの動的リストオブジェクトをJavaScriptでJSONに変換

Question

フォーム入力をJSONに変換し、ajaxで送信するフォーム送信スクリプトがあります。私はこれまで使ってきたシンプルなフォームで動作しますが、リストのために使うと正しく読み込まれません。

フォーム内には、別のスクリプトによって生成された入力の動的リストがあります。リスト項目は、次のようになります。

<li><input type="checkbox" name="skill_list[]" value="10155"></li> 

フォームはこのようになります読み込み機能：送信ボタンのイベントリスナー内

var formToJSON = elements => [].reduce.call(elements, (data, element) => { 

    data[element.name] = element.value; 
    return data; 

}, {}); 

、関数が呼び出されます。

var data = formToJSON(this.elements); 

最後に、提出する前に、データを文字列化します。

var data = JSON.stringify(data); 

エラーは、formToJSON関数で発生します。 skill_listという名前のオブジェクトを作成する代わりに、{10155,10288,10240}のような値を持つオブジェクトは、skill_list []という名前のオブジェクトを作成し、その値はリストの最初の値になります。

私はリストを認識するために関数を書き直そうとしていましたが、私はできなかったし、アイデアが不足しています。誰かが正しい方向に私を導く助けてもらえますか？

PS。私はこれをjQueryなしで書くことを好むだろう。

Answer 1

を試してみてください。

var formToJSON = elements => [].reduce.call(elements, (data, element) => { 
    var isArray = element.name.endsWith('[]'); 
    var name = element.name.replace('[]', ''); 

    data[name] = isArray ? (data[name] || []).concat(element.value) : element.value; 
    return data; 
}, {}); 

Answer 2

あなたはJSONオブジェクトにフォームデータを変換したい場合は、あなたが個別素子の配列を処理する必要が次

var formData = JSON.parse(JSON.stringify($('#frm').serializeArray()));