He intentado console.logy recorrerlo 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?

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 a Rloth por señalar esto!

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

También acabo de encontrar esta pregunta que dice lo mismo: FormData.append ("clave", "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);

Respuesta corta

console.log(...fd)

Respuesta más larga

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)

var fd = new FormData

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

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

Algunos de deseo sugieren registrar cada entrada de las entradas, pero el console.logtambién puede tomar varios argumentos
console.log(foo, bar)
Para tomar cualquier número de argumentos que podría utilizar el applymétodo y llamarlo como tal: console.log.apply(console, array).
Pero hay una nueva forma ES6 de aplicar argumentos con el operador extendido y el iterador
console.log(...array).

Sabiendo esto, y el hecho de que FormData y ambas matrices tienen un Symbol.iteratormétodo en su prototipo, simplemente puede hacer esto sin tener que recorrerlo o llamar .entries()para obtener la retención del iterador

var fd = new FormData

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

console.log(...fd)

Yo uso el formData.entries()método No estoy seguro de todo el soporte del navegador, 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 existe formData.get()y formData.getAll()con un soporte de navegador más amplio, pero solo muestran los Valores y no la Clave. Vea el enlace para más información.

En ciertos casos, el uso de:

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

es imposible.

He usado este código en reemplazo:

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

No es un código muy inteligente, pero funciona ...

Espero que sea de ayuda.

Cuando estoy trabajando en Angular 5+ (con TypeScript 2.4.2), intenté lo siguiente y funciona excepto un error de comprobación estática pero for(var pair of formData.entries())tampoco funciona.

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)
});

Comprobar en Stackblitz

Método fácil

Usé este código en angular 8

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

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

Soluciones ES6 +:

Para ver la estructura de los datos del formulario:

console.log([...formData])

Para ver cada par clave-valor:

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

Aquí hay una función para registrar entradas de un objeto FormData en la consola como un objeto.

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);
};

MDN doc en .entries()

MDN doc .next()y.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) {


            },

       });
}

Tienes que entender que FormData::entries()devuelve una instancia de Iterator.

Tome este formulario de ejemplo:

<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>

y este bucle JS:

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

En angular 7 obtuve entradas en la consola usando la siguiente línea de código.

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

Ya respondió, pero si desea recuperar valores de una manera fácil de un formulario enviado, puede usar el operador de propagación combinado con la creación de un nuevo Mapa iterable para obtener una estructura agradable.

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

en typeScriptde angular 6, este código está trabajando para mí.

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

o para todos los valores:

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

Prueba esta función:

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

El MDN sugiere la siguiente forma:

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

Alternativamente

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

Considere agregar ES + Polyfills , en caso de que el navegador o el entorno no sean compatibles con la última versión de JavaScript y FormData API.

Espero que esto ayude.