我有一個廣泛的表格，我正在嘗試組織它，以便它對于我打算與之一起制定的計劃仍然可行。
顯示我的表單的示例：
<input type="text" name="data[0][name]">
<input type="email" name="data[0][email]">
<input type="tel" name="data[0][phone]">
<input type="text" name="data[1][name]">
<input type="email" name="data[1][email]">
<input type="tel" name="data[1][phone]">
我希望它回傳為：
- data
- data[0]
- data[name]
- data[email]
- data[phone]
- data[1]
- data[name]
- data[email]
- data[phone]
但是，new FormData(form);然后Object.fromEntries(formData)我只是將它放在不同的行上（作為一個大陣列）。
有人可以幫助我以一種簡單的方式以動態方式轉換它們，因為在我的實際設定中，我有幾十個欄位。所以手動對我來說不是一個理想的選擇。
謝謝！
uj5u.com熱心網友回復：
要將表單元素的（單層）NodeList轉換為嵌套物件，使用表單元素名稱組件，您可以遍歷資料表單元素：
const dataform_obj = {} // instantiate empty object
// specify regular expression to capture name components
// for example: data[0][email]
const dataform_re = /^([^\[] )(\[\d \])(\[[^\]] \])$/;
// convert form elements into array then loop
[...document.querySelector('#dataform').elements].forEach(function (elem) {
// capture name components
const match = elem.name.match(dataform_re);
// match[1] is first name, match[2] is index, match[3] is last name
// for example, ["data", "0", "email"]
// instantiate sub-objects if do not exist
if ( !dataform_obj[match[1]] ) {
dataform_obj[match[1]] = {};
}
if ( !dataform_obj[match[1]][match[1] match[2]] ) {
dataform_obj[match[1]][match[1] match[2]] = {};
}
// assign element value to object
dataform_obj[match[1]][match[1] match[2]][match[1] match[3]] = elem.value;
})
上面，一個javascript正則運算式用于捕獲表單元素名稱的各個組成部分。然后使用這些組件來構建物件層次結構。
console.log(dataform_obj);
...產生：
data: {
data[0]: {
data[email]: "",
data[name]: "",
data[phone]: ""
},
data[1]: {
data[email]: "",
data[name]: "",
data[phone]: ""
}
在線示例：https ://jsfiddle.net/n4m32wzh/
也許，這是您真正要尋找的格式：
data: {
0: {
email: "",
name: "",
phone: ""
},
1: {
email: "",
name: "",
phone: ""
}
}
這樣做：
const dataform_obj = {};
const dataform_re = /^([^\[] )\[(\d )\]\[([^\]] )\]$/;
[...document.querySelector('#dataform').elements].forEach(function (elem) {
const match = elem.name.match(dataform_re)
if ( !dataform_obj[match[1]] ) {
dataform_obj[match[1]] = {}; // <-- this level can alternatively be an array using [] instead of {} since the component is a number
}
if ( !dataform_obj[match[1]][match[2]] ) {
dataform_obj[match[1]][match[2]] = {};
}
dataform_obj[match[1]][match[2]][match[3]] = elem.value;
});
console.log(dataform_obj["data"])
在線示例：https ://jsfiddle.net/gnav6qb4/2/
如果你已經有一個 FormData 物件，你可以這樣回圈：
const dataform = new FormData(document.querySelector('#dataform'));
[...dataform.entries()].forEach(function (elem) {
// elem is an array: [element name, element value]
//...
uj5u.com熱心網友回復：
我認為沒有標準的方法可以做到這一點。您可以嘗試找到將 FormData 轉換為 JSON 的現有解決方案（https://www.google.com/search?q=formdata to json npm），您可以參考如何轉換 FormData（HTML5 物件）中的解決方案到 JSON ，或者您可以在https://github.com/therealparmesh/object-to-formdata中找到靈感并撰寫反向操作。解決方案的復雜性取決于資料的復雜性和解決方案所需的性能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/473535.html
標籤：javascript 数组 形式 表单数据