Tengo un formulario extenso y estoy tratando de organizar esto para que siga siendo practicable para el plan que pretendo tener con él.
Un ejemplo que muestra cómo se ve mi formulario:
<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]">Quiero que esto regrese como:
- data - data[0] - data[name] - data[email] - data[phone] - data[1] - data[name] - data[email] - data[phone] Pero con new FormData(form); y luego Object.fromEntries(formData) Solo lo obtengo en líneas separadas (como una gran matriz).
¿Puede alguien ayudarme con una manera fácil de convertirlos de forma dinámica porque en mi configuración real tengo docenas de campos? Así que manualmente no es una opción deseada para mí.
¡Gracias!
No creo que haya una forma estándar de hacer esto. Puede intentar encontrar una solución existente que convierta FormData en JSON ( https://www.google.com/search?q=formdata+to+json+npm ), puede consultar las soluciones deCómo convertir FormData (objeto HTML5) a JSON , o puede encontrar inspiración, por ejemplo, en https://github.com/therealparmesh/object-to-formdata y escribir la operación inversa. La complejidad de su solución dependerá de la complejidad de sus datos y del rendimiento requerido para la solución.
Para convertir una lista de nodos (de una sola capa) de elementos de formulario en un objeto anidado, utilizando los componentes de nombre de elemento de formulario, puede recorrer los elementos de formulario de datos:
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; })Arriba, se usa una expresión regular de JavaScript para capturar los diversos componentes del nombre del elemento de formulario. Esos componentes se utilizan luego para construir la jerarquía de objetos.
console.log(dataform_obj);... produce:
data: { data[0]: { data[email]: "", data[name]: "", data[phone]: "" }, data[1]: { data[email]: "", data[name]: "", data[phone]: "" }Ejemplo en línea: https://jsfiddle.net/n4m32wzh/
Tal vez, este es el formato que realmente estás buscando:
data: { 0: { email: "", name: "", phone: "" }, 1: { email: "", name: "", phone: "" } }Haz eso así:
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"])Ejemplo en línea: https://jsfiddle.net/gnav6qb4/2/
Si ya tiene un objeto FormData, puede hacer un bucle de esta manera:
const dataform = new FormData(document.querySelector('#dataform')); [...dataform.entries()].forEach(function (elem) { // elem is an array: [element name, element value] //...