Bagaimana cara memeriksa FormData?


220

Saya sudah mencoba console.logdan mengulanginya for in.

Ini dia Referensi MDN pada FormData.

Kedua upaya ada di biola ini .

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

Bagaimana saya bisa memeriksa data formulir untuk melihat kunci apa yang telah ditetapkan.


Bukankah ini fitur firefox saja?
Shiplu Mokaddim


1
Anda ingin melakukan key of fdalih - alih key in fd. Saya tidak tahu mengapa ini secara teknis, tetapi berhasil. Dokumentasi di sini .
cilphex

Jadi, tidak ada plugin chrome atau firefox untuk menampilkan data formulir tanpa menambahkan kode apa pun ke javascript Anda?
natel

Jawaban:


298

Metode yang Diperbarui:

Pada Maret 2016, versi terbaru dari Chrome dan Firefox sekarang mendukung penggunaan FormData.entries()untuk memeriksa FormData. Sumber .

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

Terima kasih kepada Ghost Echo dan bajingan karena menunjukkan ini!

Jawaban lama:

Setelah melihat artikel Mozilla ini , sepertinya tidak ada cara untuk mendapatkan data dari objek FormData. Anda hanya dapat menggunakannya untuk membangun FormData untuk dikirim melalui permintaan AJAX.

Saya juga baru saja menemukan pertanyaan ini yang menyatakan hal yang sama: FormData.append ("key", "value") tidak berfungsi .

Salah satu caranya adalah dengan membangun kamus reguler dan kemudian mengonversinya ke 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]);
}

Jika Anda ingin men-debug objek FormData biasa, Anda juga bisa mengirimnya untuk memeriksanya di konsol permintaan jaringan:

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

Nah, itu akan menjadi ide yang baik, saya akan membungkus FormData dalam metode pembantu dan kemudian meneruskan objek literal. Kemudian simpan jika Anda ingin melihatnya nanti.

2
versi terbaru dari chrome dan firefox sekarang menyediakan iterator:myFormData.entries()
rloth

1
Pada saat penulisan, tidak ada cara untuk mengakses FormData. Sekarang saya telah memperbarui jawaban untuk mencerminkan API baru. Terima kasih atas kepala!
Ryan Endacott

2
Saya pikir itu juga berguna untuk dicatat bahwa Anda dapat mengambil data formulir yang ada dengan menggunakan: var formData = new FormData(formElement). Jika Anda menggunakan JQuery, karena itu Anda dapat melakukan ini: var formData = new FormData($('#formElementID')[0]). Kemudian tambahkan data sesuai kebutuhan.
Peter Valadez

Untuk iterasi FormDatadi IE / Edge: stackoverflow.com/questions/37938955/…
cs_pupil

78

Jawaban singkat

console.log(...fd)

Jawaban yang lebih panjang

Jika Anda ingin memeriksa seperti apa bahan bakunya maka Anda dapat menggunakan konstruktor Respons (bagian dari mengambil API)

var fd = new FormData

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

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

Beberapa keinginan menyarankan penebangan setiap entri entri, tetapi console.logjuga dapat mengambil beberapa argumen
console.log(foo, bar)
Untuk mengambil sejumlah argumen Anda bisa menggunakan applymetode dan menyebutnya seperti: console.log.apply(console, array).
Tetapi ada cara ES6 baru untuk menerapkan argumen dengan operator penyebaran dan iterator
console.log(...array) .

Mengetahui hal ini, dan fakta bahwa FormData dan kedua array memiliki Symbol.iteratormetode dalam prototipe Anda hanya bisa melakukan ini tanpa harus mengulanginya, atau menelepon .entries()untuk mendapatkan pegangan iterator

var fd = new FormData

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

console.log(...fd)


2
operator penyebaran !! Sangat bagus dan sangat sederhana, menampilkan format sebagai format psuedo Json. Terima kasih - untuk Respon Baru, saya baru saja mendapatkan [[PromiseStatus]]: "pending"
platinum

5
Atau dari konsol web cukup tulis[...fd]
Endless

lonceng neraka - Anda melakukannya lagi @Endless. metode apa yang disebut menggunakan tanda kurung?
platinum

baik, kurung hanyalah sebuah array dan Anda membuat yang baru. Anda sedang menyebar entri dengan ...dari formdata untuk membuat array baru dengan semua item, maka konsol hanya membuang hasil dari baris terakhir yang Anda tulis
Endless

1
jawaban terbaik di sini - harus menghapus semua gumpf dan hanya meninggalkan potongan kode 2 - terima kasih banyak
danday74

39

Saya menggunakan formData.entries()metode ini. Saya tidak yakin tentang semua dukungan browser, tetapi berfungsi baik di Firefox.

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

Ada juga formData.get()dan formData.getAll()dengan dukungan browser yang lebih luas, tetapi mereka hanya memunculkan Nilai dan bukan Kunci. Lihat tautan untuk info lebih lanjut.


3
Akhirnya mudah untuk melihat objek FormData! Ini berfungsi untuk saya setelah meningkatkan ke Chrome 50 (dirilis kemarin, 13 April 2016).
jbb

2
Pasangan var dari melempar kesalahan bagi saya. Menggantinya dengan di tampaknya untuk mencetak sesuatu setidaknya, namun itu bukan kunci atau nilai seperti negara MDN.
Johnny Welker

1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625

untuk ...ES6 fitur adalah dan hanya akan berfungsi di browser tertentu. Tidak termasuk versi IE apa pun menurut MDN
Zanshin13

untuk dari tidak didukung di sebagian besar IE. hanya didukung di IE edge
mingca

11

Dalam kasus tertentu, penggunaan:

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

tidak mungkin.

Saya telah menggunakan kode ini sebagai pengganti:

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

Ini bukan kode yang sangat pintar, tetapi berfungsi ...

Semoga ini bisa membantu.


1
Saya akan membalik pernyataan if sehingga memeriksa doneterlebih dahulu. doneadalah bendera otoritatif; jika donesalah atau tidak ditentukan, maka valueitem yang valid (bahkan jika itu memegang nilai undefined). Kapan donehadir dan true, akhir dari urutan telah tercapai, dan valuebahkan tidak harus didefinisikan. Jika valuedidefinisikan saat doneini true, maka valueditafsirkan sebagai nilai kembali dari iterator. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Triynko

10

Ketika saya mengerjakan Angular 5+ (dengan TypeScript 2.4.2), saya mencoba sebagai berikut dan berfungsi kecuali kesalahan pengecekan statis tetapi juga for(var pair of formData.entries())tidak berfungsi.

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

Periksa di Stackblitz


+ tidak kompatibel dengan IE 11 (value, key) => {... Sakit kepala !
Delphine

1
bagus. ingin memberi Anda 10 bintang.
Abdullah Nurum

10

Metode yang mudah

Saya menggunakan kode ini dalam 8 sudut

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

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

9

Solusi ES6 +:

Untuk melihat struktur data formulir:

console.log([...formData])

Untuk melihat setiap pasangan nilai kunci:

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

2

Berikut adalah fungsi untuk mencatat entri objek FormData ke konsol sebagai objek.

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

Dokumentasi MDN aktif .entries()

Dokumentasi MDN .next()dan.done


2
  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) {


            },

       });
}

+ tidak kompatibel dengan IE 11 for...of... Sakit kepala !
Delphine

2

Anda harus memahami bahwa FormData::entries()mengembalikan instance dariIterator .

Ambil contoh formulir ini:

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

dan loop-JS ini:

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

2

Di sudut 7 saya mendapat entri di konsol menggunakan di bawah baris kode.

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

2

Sudah dijawab tetapi jika Anda ingin mengambil nilai dengan cara yang mudah dari formulir yang dikirimkan, Anda dapat menggunakan operator spread dikombinasikan dengan membuat Peta baru yang dapat diubah untuk mendapatkan struktur yang bagus.

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


meskipun - ini memiliki Masalah dengan inp_nam [some_mult] [] - hanya yang terakhir terlihat
halfbit

2

di typeScriptdari angular 6, kode ini bekerja untuk saya.

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

atau untuk semua nilai:

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

1

Coba fungsi ini:

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

2
Sementara cuplikan kode ini mungkin solusinya, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Johan

0

The MDN menunjukkan bentuk berikut:

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

kalau tidak

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

Pertimbangkan untuk menambahkan ES + Polyfill , jika browser atau lingkungan tidak mendukung JavaScript dan API FormData terbaru.

Saya harap ini membantu.


Apakah Anda menguji kode ini sebelum menjalankannya? formData()harus dikapitalisasi, pertama. Juga, for ... of loopsaluran 3 Anda secara implisit memanggil FormData.entries, Anda dapat melihatnya dengan menjalankannya new FormData()[Symbol.iterator]di konsol. Akhirnya, jika Anda menjalankan ini di browser seperti Edge, yang tidak mendukung FormData.entries, Anda mendapatkan hasil yang tidak terduga, seperti mencetak nama metode yang tersedia di objek FormData:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.