FormData API | 12 Days of Web
Un petit résumé perso de cette page sur l'objet FormData en javascript.
Créer un objet FormData à partir d'un formulaire
let form = document.querySelector('form');
let data = new FormData(form);
Parcourir l'objet FormData
C'est un itérable, donc on le parcourt avec un for et on récupère des ['clé','valeur']
for (let entry of data) {
console.log(entry);
}
ou
for (let [key, value] of data) {
console.log(key);
console.log(value);
}
parcourir les clés / les valeurs
for (let key of data.keys()) {
console.log(key);
}
Get, set, update des valeurs
GET
Récupérer une valeur (sans rire ?!)
- S'il y a un seul champ au nom de la clé:
let title = data.get('title')
- S'il y en a plusieurs :
let titles = data.getAll('title');
SET
Ajouter une nouvelle valeur à l'objet FormData
data.set('date', '2022-12-25');
APPEND
Ajouter une valeur supplémentaire à une entrée existante (si l'entrée n'existe pas, elle est créée)
data.append('tags', 'vacations');
Divers
Tester si un champ existe
let hasID = data.has('id');
Récupérer un tableau
- des clés :
let arr = Array.from(data.keys());
- des valeurs :
let arr = Array.from(data.values());
Convertir un FormData en objet clés valeurs
Si votre FormData ne contient pas plusieurs champs ayant le même nom.
let serialized = Object.fromEntries(data);
Sinon, on paufine
let obj = {};
for (let [key, value] of data) {
if (obj[key] !== undefined) {
if (!Array.isArray(obj[key])) {
obj[key] = [obj[key]];
}
obj[key].push(value);
} else {
obj[key] = value;
}
}
Une fois converti en objet, on peut le transformer en JSON
let stringified = JSON.stringify(obj);
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...