Comment inspecter FormData?
j'ai essayé console.log et la boucle à travers elle en utilisant for in .
Ici, il le MDN Référence 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.
9 réponses
Méthode Mise À Jour:
depuis mars 2016, les versions récentes de Chrome et de Firefox prennent désormais en charge l'utilisation de 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 pour l'avoir souligné!
Ancienne Réponse:
après avoir regardé ces Mozilla articles , il semble comme il n'existe aucun moyen de récupérer les données d'un objet FormData. Vous ne pouvez les utiliser que pour construire FormData à envoyer via une demande AJAX.
je viens aussi de trouver cette question qui dit la même chose: FormData.ajouter ("clé"," valeur") ne fonctionne pas .
une façon de contourner cela serait de construire un dictionnaire et 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 voulez déboguer un objet FormData simple, vous pouvez aussi l'Envoyer pour 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 tout le soutien de navigateur, mais il fonctionne très 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 y a aussi formData.get() et formData.getAll() avec un navigateur plus large, mais ils ne soulèvent les valeurs et pas la clé. Voir le lien pour plus d'info.
si vous souhaitez inspecter à quoi ressemblerait le corps brut, vous pouvez utiliser le Response constructor (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 de wish suggèrent de journaliser chaque entrée des entrées, mais le console.log peut aussi prendre plusieurs arguments
console.log(foo, bar)
pour prendre n'importe quel nombre d'argument vous pourriez utiliser la méthode apply et appeler en tant que tel: console.log.apply(console, array) .
Mais il y a une nouvelle façon ES6 d'appliquer les arguments avec "spread operator et iterator
console.log(...array) .
sachant cela, et le fait que FormData et les deux tableaux ont une méthode Symbol.iterator dans son prototype, vous pouvez simplement le faire sans avoir à boucler sur elle, ou appeler .entries() pour obtenir l'emprise de iterator
var fd = new FormData
fd.append("key1", "value1")
fd.append("key2", "value2")
console.log(...fd)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.
quand je travaille sur Angular 5+ (avec le mot de passe 2.4.2), j'ai essayé comme suit et cela fonctionne sauf une erreur de vérification statique mais aussi for(var pair of formData.entries()) ne fonctionne pas.
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 enregistrer les entrées D'un objet FormData sur 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);
};
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 de Iterator .
prendre 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>
Essayez ce qui suit:
let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
console.log(i)
}