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