Come ispezionare FormData?

Ho provato console.log e ho fatto il looping usando for in .

Qui è il riferimento MDN su FormData.

Entrambi i tentativi sono in questo violino .

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

Come posso controllare i dati del modulo per vedere quali chiavi sono state impostate.

Metodo aggiornato:

A partire da marzo 2016, le versioni recenti di Chrome e Firefox ora supportano l’uso di FormData.entries() per ispezionare FormData. Fonte .

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

Grazie a Ghost Echo e rloth per averlo fatto notare!

Vecchia risposta:

Dopo aver esaminato questi articoli di Mozilla , sembra che non ci sia modo di estrarre i dati da un object FormData. È ansible utilizzarli solo per creare FormData da inviare tramite una richiesta AJAX.

Ho anche appena trovato questa domanda che afferma la stessa cosa: FormData.append (“chiave”, “valore”) non funziona .

Un modo per aggirare questo sarebbe build un dizionario regolare e poi convertirlo in 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]); } 

Se si desidera eseguire il debug di un object FormData semplice, è anche ansible inviarlo per esaminarlo nella console delle richieste di rete:

 var xhr = new XMLHttpRequest; xhr.open('POST', '/', true); xhr.send(fd); 

Io uso il metodo formData.entries() . Non sono sicuro di tutto il supporto del browser, ma funziona bene su Firefox.

Tratto da 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]); } 

C’è anche formData.get() e formData.getAll() con un supporto browser più ampio, ma richiamano solo i valori e non la chiave. Vedi il link per maggiori informazioni.

Se si desidera esaminare l’aspetto del corpo grezzo, è ansible utilizzare il costruttore Response (parte dell’API fetch)

 var fd = new FormData fd.append("key1", "value1") fd.append("key2", "value2") new Response(fd).text().then(console.log) 

In alcuni casi, l’uso di:

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

è imansible.

Ho usato questo codice in sostituzione:

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

Non è un codice molto intelligente, ma funziona …

Spero sia di aiuto.

Ecco una funzione per registrare le voci di un object FormData sulla console come un object.

 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 su .entries()

.next() MDN su .next() e .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) { }, }); } 

Devi capire che FormData::entries() restituisce un’istanza di Iterator .

Prendi questo modulo di esempio:

 

e questo loop JS:

  

Quando lavoro su Angular 5+ (con TypeScript 2.4.2), ho provato come segue e funziona eccetto un errore di controllo statico ma anche for(var pair of formData.entries()) non funziona.

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

Prova questo ::

 let formdata = new formData() formdata.append('name', 'Alex Johnson') for(let i of formdata){ console.log(i) }