¿Cómo inspeccionar FormData?

Esta es la respuesta más válida que encomtrarás brindar, pero primero mírala detenidamente y valora si es compatible a tu proyecto.

Solución:

Método actualizado:

A partir de marzo de 2016, las versiones recientes de Chrome y Firefox ahora admiten el uso de 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!

Respuesta antigua:

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 para enviar a través de una solicitud AJAX.

También encontré esta pregunta que dice lo mismo: FormData.append(“key”, “valor”) no funciona.

Una forma de evitar esto sería crear un diccionario regular 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
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 entrada de entradas, pero el console.log también puede tomar múltiples argumentos
console.log(foo, bar)
Para tomar cualquier número de argumentos, puede usar el apply método y llamarlo como tal: console.log.apply(console, array).
Pero hay una nueva forma ES6 de aplicar argumentos con operador de propagación e iterador
console.log(...array).

Sabiendo esto, y el hecho de que FormData y arrayambos tienen un método Symbol.iterator en su prototipo que especifica el bucle predeterminado for…of, luego puede distribuir los argumentos con ...iterable sin tener que ir a llamar formData.entries() método (ya que esa es la función predeterminada)

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)

// Don't work in all browser (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 procesar, entonces podría usar el constructor de Respuesta (parte de la API de búsqueda), 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)

Yo uso la formData.entries() método. No estoy seguro de la compatibilidad con todos los navegadores, pero funciona bien en Firefox.

Tomado 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]); 

También hay formData.get() y formData.getAll() con un soporte de navegador más amplio, pero solo muestran los valores y no la clave. Ver el enlace para más información.

Puedes añadir valor a nuestro contenido participando con tu veteranía en las interpretaciones.

---

---

Utiliza Nuestro Buscador