He estado tratando de obtener un objeto anidado de formData de un formulario con claves anidadas como la siguiente:
<input name="item[0][id]" value="0121"/> <input name="item[0][name]" value="Birmingham"/> <input name="item[1][id]" value="01675"/> <input name="item[1][name]" value="Warwickshire"/>Para ser formateado como un objeto como este:
{ 'item': [ { 'id': '0121', 'name': 'Birmingham' }, { 'id': '01675', 'name': 'Warwickshire' } ] }No:
{ 'item[0][id]': '0121', 'item[0][name]': 'Birmingham', 'item[1][id]': '01675', 'item[1][name]': 'Warwickshire' }Actualmente estoy usando el siguiente, que se genera en el formato anterior.
const formData = new FormData(this.form); const object = Object.fromEntries(formData);Esencialmente, me gustaría tener los datos del formulario formateados como estarían cuando PHP los reciba, por ejemplo.
Podría usar algo como la función _.set de _.set , o una implementación de la misma función en JavaScript estándar, que usaré en el siguiente fragmento:
// This function is taken from https://stackoverflow.com/a/54733755/5459839 function deepSet(obj, path, value) { if (Object(obj) !== obj) return obj; // When obj is not an object // If not yet an array, get the keys from the string-path if (!Array.isArray(path)) path = path.toString().match(/[^.[\]]+/g) || []; path.slice(0,-1).reduce((a, c, i) => // Iterate all of them except the last one Object(a[c]) === a[c] // Does the key exist and is its value an object? // Yes: then follow that path ? a[c] // No: create the key. Is the next key a potential array-index? : a[c] = Math.abs(path[i+1])>>0 === +path[i+1] ? [] // Yes: assign a new array object : {}, // No: assign a new plain object obj)[path[path.length-1]] = value; // Finally assign the value to the last key return obj; // Return the top-level object to allow chaining } // Use it for formData: function formDataObject(form) { const formData = new FormData(form); const root = {}; for (const [path, value] of formData) { deepSet(root, path, value); } return root; } // Example run const result = formDataObject(document.forms[0]); console.log(result); <form> <input name="item[0][id]" value="0121"/> <input name="item[0][name]" value="Birmingham"/> <input name="item[1][id]" value="01675"/> <input name="item[1][name]" value="Warwickshire"/> </form>