¿Cómo inspeccionar FormData?
Lo intenté console.logy lo recorrí usando for in.
Aquí está la referencia de MDN en FormData.
Ambos intentos están en este violín .
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);
}
¿Cómo puedo inspeccionar los datos del formulario para ver qué claves se han configurado?
Jun 12
'13 20:06
Método actualizado:
A partir de marzo de 2016, las versiones recientes de Chrome y Firefox ahora admiten el uso FormData.entries()para inspeccionar FormData. Fuente .
// 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]);
}
¡Gracias a Ghost Echo y rloth por señalar esto!
Antigua respuesta:
Después de mirar estos artículos de Mozilla , parece que no hay forma de obtener datos de un objeto FormData. Solo puede usarlos para crear FormData y enviarlos mediante una solicitud AJAX.
También encontré esta pregunta que dice lo mismo: FormData.append("key", "value") no funciona .
Una forma de solucionar esto sería crear un diccionario normal y luego convertirlo a 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 desea depurar un objeto FormData simple, también puede enviarlo para examinarlo en la consola de solicitud de red:
var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
Pocas respuestas cortas
[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body
respuesta más larga
Otros sugieren registrar cada uno entry of fd.entries(), pero console.logtambién pueden tomar múltiples argumentos. console.log(foo, bar, ...)
Para tomar cualquier número de argumentos, puede usar el applymétodo y llamarlo como tal console.log.apply(console, array):.
Pero hay una nueva forma en ES6 de aplicar argumentos con operador de extensión e iterador console.log(...array).
Sabiendo esto, y el hecho de que FormData y array tienen un método Symbol.iterator en su prototipo que especifica el bucle for...of predeterminado , entonces puede distribuir los argumentos ...iterablesin tener que ir a llamar formData.entries()al método (ya que es la función predeterminada) puedes hacerlo for (x of formData)si lo prefieres
var fd = new FormData()
fd.append('key1', 'value1')
fd.append('key2', 'value2')
fd.append('key2', 'value3')
// using it's default for...of specified by Symbol.iterator
// Same as calling `fd.entries()`
for (let [key, value] of fd) {
console.log(`${key}: ${value}`)
}
// also using it's default for...of specified by Symbol.iterator
console.log(...fd)
// Only shows up in devtool (not here in this code snippet)
console.table([...fd])
// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))Si desea inspeccionar cómo se vería el cuerpo sin formato, puede usar el constructor de respuesta (parte de la API de recuperación), esto convertirá sus datos de formulario a cómo se verían realmente cuando cargue los datos de formulario.
var fd = new FormData()
fd.append('key1', 'value1')
fd.append('key2', 'value2')
new Response(fd).text().then(console.log)