Postingan ini sudah berumur setahun ... tapi, saya sangat, sangat suka jawaban ES6 @dzuc. Namun ini tidak lengkap karena tidak dapat menangani beberapa kotak centang atau kotak centang. Ini telah menunjuk dan solusi kode telah ditawarkan. Saya merasa mereka berat dan tidak dioptimalkan. Jadi saya menulis 2 versi berdasarkan @dzuc untuk menangani kasus ini:
- Untuk bentuk gaya ASP di mana beberapa nama item bisa diulangi dengan sederhana.
let r=Array.from(fd).reduce(
(o , [k,v]) => (
(!o[k])
? {...o , [k] : v}
: {...o , [k] : [...o[k] , v]}
)
,{}
);
let obj=JSON.stringify(r);
Versi Jagoan satu baris:
Array.from(fd).reduce((o,[k,v])=>((!o[k])?{...o,[k]:v}:{...o,[k]:[...o[k],v]}),{});
- Untuk bentuk gaya PHP di mana beberapa nama item harus memiliki
[]akhiran.
let r=Array.from(fd).reduce(
(o , [k,v]) => (
(k.split('[').length>1)
? (k=k.split('[')[0]
, (!o[k])
? {...o , [k] : [v]}
: {...o , [k] : [...o[k] , v ]}
)
: {...o , [k] : v}
)
,{}
);
let obj=JSON.stringify(r);
Versi Jagoan satu baris:
Array.from(fd).reduce((o,[k,v])=>((k.split('[').length>1)?(k=k.split('[')[0],(!o[k])?{...o,[k]:[v]}:{...o,[k]:[...o[k],v]}):{...o,[k]:v}),{});
- Perpanjangan bentuk PHP yang mendukung array multi-level.
Sejak terakhir kali saya menulis kasus kedua sebelumnya, di tempat kerja muncul kasus bahwa formulir PHP memiliki kotak centang pada multi-level. Saya menulis kasus baru untuk mendukung kasus sebelumnya dan yang ini. Saya membuat cuplikan untuk memamerkan kasus ini dengan lebih baik, hasilnya ditampilkan di konsol untuk demo ini, ubah ini sesuai kebutuhan Anda. Mencoba mengoptimalkannya sebaik mungkin tanpa mengorbankan kinerja, namun, ini membahayakan beberapa keterbacaan manusia. Ini mengambil keuntungan bahwa array adalah objek dan variabel yang menunjuk ke array disimpan sebagai referensi. Tidak ada jagoan untuk yang satu ini, jadilah tamuku.
let nosubmit = (e) => {
e.preventDefault();
const f = Array.from(new FormData(e.target));
const obj = f.reduce((o, [k, v]) => {
let a = v,
b, i,
m = k.split('['),
n = m[0],
l = m.length;
if (l > 1) {
a = b = o[n] || [];
for (i = 1; i < l; i++) {
m[i] = (m[i].split(']')[0] || b.length) * 1;
b = b[m[i]] = ((i + 1) == l) ? v : b[m[i]] || [];
}
}
return { ...o, [n]: a };
}, {});
console.log(obj);
}
document.querySelector('#theform').addEventListener('submit', nosubmit, {capture: true});
<h1>Multilevel Form</h1>
<form action="#" method="POST" enctype="multipart/form-data" id="theform">
<input type="hidden" name="_id" value="93242" />
<input type="hidden" name="_fid" value="45c0ec96929bc0d39a904ab5c7af70ef" />
<label>Select:
<select name="uselect">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</label>
<br /><br />
<label>Checkboxes one level:<br/>
<input name="c1[]" type="checkbox" checked value="1"/>v1
<input name="c1[]" type="checkbox" checked value="2"/>v2
<input name="c1[]" type="checkbox" checked value="3"/>v3
</label>
<br /><br />
<label>Checkboxes two levels:<br/>
<input name="c2[0][]" type="checkbox" checked value="4"/>0 v4
<input name="c2[0][]" type="checkbox" checked value="5"/>0 v5
<input name="c2[0][]" type="checkbox" checked value="6"/>0 v6
<br/>
<input name="c2[1][]" type="checkbox" checked value="7"/>1 v7
<input name="c2[1][]" type="checkbox" checked value="8"/>1 v8
<input name="c2[1][]" type="checkbox" checked value="9"/>1 v9
</label>
<br /><br />
<label>Radios:
<input type="radio" name="uradio" value="yes">YES
<input type="radio" name="uradio" checked value="no">NO
</label>
<br /><br />
<input type="submit" value="Submit" />
</form>
JSON.stringify()membantu? Mungkin Anda mencoba memperbaiki sesuatu yang mungkin dilakukan dengan cara lain?