J'ai essayé de le console.logparcourir en utilisant for in.

Voici la référence MDN sur FormData.

Les deux tentatives sont dans ce violon .

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

Comment puis-je inspecter les données du formulaire pour voir quelles clés ont été définies.

Méthode mise à jour:

Depuis mars 2016, les versions récentes de Chrome et Firefox prennent désormais en charge l'utilisation FormData.entries()pour inspecter FormData. Source .

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Merci à Ghost Echo et rloth de l' avoir signalé!

Ancienne réponse:

Après avoir consulté ces articles Mozilla , il semble qu'il n'y ait aucun moyen d'extraire des données d'un objet FormData. Vous ne pouvez les utiliser que pour créer FormData à envoyer via une demande AJAX.

Je viens également de trouver cette question qui dit la même chose: FormData.append ("clé", "valeur") ne fonctionne pas .

Un moyen de contourner ce problème serait de créer un dictionnaire standard, puis de le convertir en FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

Si vous souhaitez déboguer un objet FormData ordinaire, vous pouvez également l'envoyer afin de l'examiner dans la console de demande réseau:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Réponse courte

console.log(...fd)

Réponse plus longue

Si vous souhaitez inspecter l'apparence du corps brut, vous pouvez utiliser le constructeur Response (qui fait partie de l'API fetch)

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

Certains souhaitent suggérer d'enregistrer chaque entrée d'entrées, mais le console.logpeut également prendre plusieurs arguments.
console.log(foo, bar)
Pour prendre un nombre quelconque d'arguments, vous pouvez utiliser leapply méthode et l' appeler en tant que tel: console.log.apply(console, array).
Mais il existe une nouvelle façon ES6 d'appliquer des arguments avec l' opérateur de propagation et l'itérateur
console.log(...array) .

Sachant cela, et le fait que FormData et les deux tableaux ont une Symbol.iteratorméthode dans leur prototype, vous pouvez simplement le faire sans avoir à faire une boucle dessus, ou appeler .entries()pour obtenir la prise de l'itérateur

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)

J'utilise la formData.entries()méthode. Je ne suis pas sûr de la prise en charge de tous les navigateurs, mais cela fonctionne bien sur Firefox.

Tiré de https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

Il existe également formData.get()et formData.getAll()avec un support de navigateur plus large, mais ils n'affichent que les valeurs et non la clé. Voir le lien pour plus d'informations.

Dans certains cas, l'utilisation de:

for(var pair of formData.entries(){... 

est impossible.

J'ai utilisé ce code en remplacement:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

Ce n'est pas un code très intelligent, mais ça marche ...

J'espère que c'est de l'aide.

Lorsque je travaille sur Angular 5+ (avec TypeScript 2.4.2), j'ai essayé comme suit et cela fonctionne sauf une erreur de vérification statique mais for(var pair of formData.entries())ne fonctionne pas non plus.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

Vérifiez à Stackblitz

Méthode facile

J'ai utilisé ce code en angulaire 8

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

Solutions ES6 +:

Pour voir la structure des données du formulaire:

console.log([...formData])

Pour voir chaque paire clé-valeur:

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}

Voici une fonction pour enregistrer les entrées d'un objet FormData dans la console en tant qu'objet.

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

Doc MDN sur .entries()

Doc MDN sur .next()et.done

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

Vous devez comprendre que FormData::entries()renvoie une instance deIterator .

Prenez cet exemple de formulaire:

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

et cette boucle JS:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

Dans angular 7, j'ai obtenu des entrées sur la console en utilisant la ligne de code ci-dessous.

formData.forEach(entries => console.log(entries));

Déjà répondu, mais si vous souhaitez récupérer facilement des valeurs à partir d'un formulaire soumis, vous pouvez utiliser l'opérateur de diffusion combiné à la création d'une nouvelle carte itérable pour obtenir une belle structure.

new Map([...new FormData(form)])

dans typeScriptde angular 6, ce code fonctionne pour moi.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

ou pour toutes les valeurs:

console.log(formData.getAll('name')); // return all values

Essayez cette fonction:

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

Le MDN propose la forme suivante:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

Alternativement

for (let [key, value] of formData.entries()) {
 console.log(key, ':', value);
}

Envisagez d'ajouter ES + Polyfills , au cas où le navigateur ou l'environnement ne prend pas en charge les dernières API JavaScript et FormData.

J'espère que ça aide.