Comment inspecter FormData?
J'ai essayé console.log et je l'ai parcouru avec for in.
Voici le 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 de 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 de FormData.entries() pour inspecter FormData. La 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 pour le signaler!
Ancienne réponse:
Après avoir examiné ceux-ciMozillaarticles , il semble qu'il n'existe aucun moyen d'extraire des données d'un objet FormData. Vous ne pouvez les utiliser que pour construire 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 .
Une solution consiste à créer un dictionnaire standard, puis à 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 brut, vous pouvez également l'envoyer afin de l'examiner dans la console de requête réseau:
var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
J'utilise la méthode formData.entries(). Je ne suis pas sûr de la compatibilité de tous les navigateurs, mais cela fonctionne bien sous Firefox.
Extrait 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 une prise en charge de navigateur plus large, mais ils ne font que mettre en place 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)
});Voici une fonction pour consigner 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);
};
Solutions ES6 +:
Pour voir la structure des données de formulaire:
console.log([...formData])
Pour voir chaque paire clé-valeur:
for (let [key, value] of formData.entries()) {
console.log(key, ':', value);
}
Vous devez comprendre que FormData::entries() renvoie une instance de Iterator.
Prenons cet exemple:
<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>
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) {
},
});
}
Essayez cette fonction:
function formDataToObject(formData) {
return Array.from(formData.entries()).reduce((old, pair) => ({
...old,
[pair[0]]: pair[1],
}), {});
}
Vous avez 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 propagation associé à la création d'une nouvelle carte itérable pour obtenir une structure de Nice.
new Map([...new FormData(form)])
dans TypeScript de 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
Dans angular 7, j'ai eu des entrées sur console en utilisant la ligne de code ci-dessous.
formData.forEach(entries => console.log(entries));
Essaye ça ::
let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
console.log(i)
}