Conversion HTML5 FormData en JSON

La conversion des entrées d'un objet HTML5 FormData en JSON est une tâche courante dans le développement Web. Bien qu'il existe différentes approches pour y parvenir, la méthode la plus simple et la plus efficace consiste à utiliser la fonction forEach() directement sur l'objet FormData.

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

Cette approche parcourt chaque paire clé-valeur de l'objet FormData et les ajoute à un nouvel objet JavaScript. La méthode JSON.stringify() est ensuite utilisée pour convertir l'objet en chaîne JSON.

Mise à jour : fonctions fléchées ES6

Pour ceux qui préfèrent la syntaxe ES6, la la même solution peut être écrite à l'aide des fonctions fléchées :

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

Mise à jour 2 : prise en charge des éléments de formulaire à valeurs multiples

Pour prendre en charge les éléments de formulaire avec plusieurs valeurs, tels que la sélection multiple listes, le code suivant peut être utilisé :

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

Mise à jour 3 : Soumission directe via XMLHttpRequest et API Fetch

L'envoi de FormData directement à un serveur sans conversion est possible en utilisant le Objet XMLHttpRequest ou API Fetch :

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});

Mise à jour 4 : Sérialisation JSON d'objets complexes

Une logique de sérialisation personnalisée peut être définie pour les objets complexes via la méthode toJSON().