javascript - example - formdata w3schools

Cómo convertir FormData(Objeto HTML5) a JSON

Question

¿Cómo convertir el objeto FormData HTML5 a JSON? Sin Jquery y manejo de propiedades anidadas en FormData como un objeto.

Answer 1

Aquí hay una manera de hacerlo en un estilo más funcional, sin el uso de una biblioteca.

Array.from(formData.entries()).reduce((memo, pair) => ({
...memo,
[pair[0]]: pair[1],
}), {});

Ejemplo:

document.getElementById(''foobar'').addEventListener(''submit'', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Array.from(formData.entries()).reduce((memo, pair) => ({
...memo,
[pair[0]]: pair[1],
}), {});
document.getElementById(''output'').innerHTML = JSON.stringify(data);
});

<form id=''foobar''>
<input name=''baz'' />
<input type=''submit'' />
</form>
<pre id=''output''>Input some value and submit</pre>

Answer 2

El método .entries y la expresión for of no se admiten en IE11 y Safari.

Aquí hay una versión más sencilla para admitir Safari, Chrome, Firefox y Edge

function formDataToJSON(formElement) {
var formData = new FormData(formElement),
convertedJSON = {};
formData.forEach(function(value, key) {
convertedJSON[key] = value;
});
return convertedJSON;
}

Advertencia: esta respuesta no funciona en IE11.
FormData no tiene un método forEach en IE11.
Todavía estoy buscando una solución final para soportar todos los principales navegadores.

Answer 3

Esta publicación ya tiene un año de antigüedad ... pero realmente me gusta la respuesta de @6dduc de ES6. Sin embargo, está incompleto al no haber podido manejar selecciones múltiples o casillas de verificación. Esto ya ha apuntado y se han ofrecido soluciones de código. Los encuentro pesados ​​y no optimizados. Así que escribí 2 versiones basadas en @dzuc para manejar estos casos:

• Para las formas de estilo ASP donde el nombre de varios elementos simplemente se puede repetir.

let r=Array.from(fd.entries()).reduce(
(o , p) => (
(!o[p[0]])
? {...o , [p[0]] : p[1]}
: {...o , [p[0]] : [...o[p[0]] , p[1]]}
)
,{}
);
let obj=JSON.stringify(r);

Versión de una línea Hotshot:

Array.from(fd.entries()).reduce((o,p)=>((!o[p[0]])?{...o,[p[0]]:p[1]}:{...o,[p[0]]:[...o[p[0]],p[1]]}),{});

• Para formularios de estilo PHP donde los nombres de múltiples elementos deben tener un sufijo [] .

let r=Array.from(fd.entries()).reduce(
(o , p) => (
(p[0].split(''['').length>1)
? (p[0]=p[0].split(''['')[0]
, (!o[p[0]])
? {...o , [p[0]] : [p[1]]}
: {...o , [p[0]] : [...o[p[0]] , p[1] ]}
)
: {...o , [p[0]] : p[1]}
)
,{}
);
let obj=JSON.stringify(r);

Versión de una línea Hotshot:

Array.from(fd.entries()).reduce((o,p)=>((p[0].split(''['').length>1)?(p[0]=p[0].split(''['')[0],(!o[p[0]])?{...o,[p[0]]:[p[1]]}:{...o,[p[0]]:[...o[p[0]],p[1]]}):{...o,[p[0]]:p[1]}),{});

Answer 4

Puedes lograr esto usando el objeto FormData() . Este objeto FormData se rellenará con las claves / valores actuales del formulario utilizando la propiedad de nombre de cada elemento para las claves y su valor enviado para los valores. También codificará el contenido de entrada del archivo.

Ejemplo:

var myForm = document.getElementById(''myForm'');
myForm.addEventListener(''submit'', function(event)
{
event.preventDefault();
var formData = new FormData(myForm),
result = {};
for (var entry of formData.entries())
{
result[entry[0]] = entry[1];
}
result = JSON.stringify(result)
console.log(result);
});

Answer 5

Puedes probar esto

formDataToJSON($(''#form_example''));
# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $(''#form_example'');
# @return a JSON Stringify
function formDataToJSON(form) {
let obj = {};
let formData = form.serialize();
let formArray = formData.split("&");
for (inputData of formArray){
let dataTmp = inputData.split(''='');
obj[dataTmp[0]] = dataTmp[1];
}
return JSON.stringify(obj);
}

Answer 6

Si está utilizando lodash, puede hacerlo de forma concisa con fromPairs

import {fromPairs} from ''lodash'';
const object = fromPairs(Array.from(formData.entries()));

Answer 7

Si tiene varias entradas con el mismo nombre, por ejemplo, si usa <SELECT multiple> o tiene múltiples <INPUT type="checkbox"> con el mismo nombre, debe cuidar eso y hacer una matriz del valor. De lo contrario solo obtendrás el último valor seleccionado.

Aquí está la variante moderna de ES6:

function formToJSON( elem ) {
let output = {};
new FormData( elem ).forEach(
( value, key ) => {
// Check if property already exist
if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
let current = output[ key ];
if ( !Array.isArray( current ) ) {
// If it''s not an array, convert it to an array.
current = output[ key ] = [ current ];
}
current.push( value ); // Add the new value to the array.
} else {
output[ key ] = value;
}
}
);
return JSON.stringify( output );
}

Código ligeramente más antiguo (pero aún no es compatible con IE11, ya que no admite ForEach o entries en FormData )

function formToJSON( elem ) {
var current, entries, item, key, output, value;
output = {};
entries = new FormData( elem ).entries();
// Iterate over values, and assign to item.
while ( item = entries.next().value )
{
// assign to variables to make the code more readable.
key = item[0];
value = item[1];
// Check if key already exist
if (Object.prototype.hasOwnProperty.call( output, key)) {
current = output[ key ];
if ( !Array.isArray( current ) ) {
// If it''s not an array, convert it to an array.
current = output[ key ] = [ current ];
}
current.push( value ); // Add the new value to the array.
} else {
output[ key ] = value;
}
}
return JSON.stringify( output );
}

Answer 8

También puede usar forEach en el objeto FormData directamente:

var object = {};
formData.forEach(function(value, key){
object[key] = value;
});
var json = JSON.stringify(object);

Answer 9

Función fácil de usar

He creado una función para esto

function FormDataToJSON(FormElement){
var formData = new FormData(FormElement);
var ConvertedJSON= {};
for (const [key, value] of formData.entries())
{
ConvertedJSON[key] = value;
}
return ConvertedJSON
}

Ejemplo de uso

var ReceivedJSON = FormDataToJSON(document.getElementById(''FormId'');)

En este código, he creado una variable JSON vacía utilizando for loop. He utilizado las key del objeto formData a las claves JSON en cada Itración.

Usted encuentra este código en mi biblioteca de JS en GitHub Sí sugiérame si necesita mejoras He colocado el código aquí https://github.com/alijamal14/Utilities/blob/master/Utilities.js