Comment convertir FormData (objet HTML5) en JSON

Question

Comment convertir un objet HTML5 FormData en JSON? Sans Jquery et la gestion des propriétés imbriquées dans FormData comme un objet.

Answer 1

Vous pouvez également utiliser forEach sur l'objet FormData directement:

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

Answer 2

Voici une façon de le faire dans un style plus fonctionnel, sans utiliser de bibliothèque.

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

Exemple:

 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 3

Si vous avez plusieurs entrées avec le même nom, par exemple, si vous utilisez <SELECT multiple> ou plusieurs <INPUT type="checkbox"> avec le même nom, vous devez prendre soin de cela et faire un tableau de la valeur. Sinon, vous obtenez seulement la dernière valeur sélectionnée.

Voici le moderne ES6-variante:

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 );
}

Un peu plus de code (mais pas encore pris en charge par IE11, car il ne prend pas en charge ForEach ou entries sur 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 4

Vous pouvez y parvenir en utilisant l'objet FormData () . Cet objet FormData sera rempli avec les clés / valeurs actuelles du formulaire à l'aide de la propriété name de chaque élément pour les clés et de leur valeur soumise pour les valeurs. Il va également encoder le contenu d'entrée du fichier.

Exemple:

 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

Facile À Utiliser La Fonction

J'Ai Créé Une Fonction Pour Cela

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

    return ConvertedJSON
}

Exemple D'Utilisation

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

Dans ce code, j'ai créé des vides JSON variable à l'aide de for boucle, j'ai utilisé keys à partir de l'Objet formData JSON Clés dans chaque Itration.

Vous Trouverez Ce Code Dans Ma Bibliothèque JS Sur GitHub Ne Me Suggère, Si Elle a Besoin d'Amélioration, j'Ai Placé le Code Ici https://github.com/alijamal14/Utilities/blob/master/Utilities.js