Como inspecionar FormData?

220

Eu tentei console.loge circulando através dele usando for in.

Aqui está a referência MDN no FormData.

Ambas as tentativas estão nesse 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);
}

Como inspecionar os dados do formulário para ver quais chaves foram definidas.

Penny Liu
fonte
Não é apenas um recurso do Firefox?
Shiplu Mokaddim
1
Você quer fazer em key of fdvez de key in fd. Ainda não sei por que isso ainda é tecnicamente, mas funciona. Documentação aqui .
Cilphex #
Portanto, não há plugins chrome ou firefox para mostrar dados do formulário sem adicionar nenhum código ao seu javascript?
Natel

Respostas:

298

Método atualizado:

Em março de 2016, as versões recentes do Chrome e Firefox agora são compatíveis com FormData.entries()a inspeção de 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]); 
}

Obrigado ao Ghost Echo e rloth por apontar isso!

Resposta antiga:

Depois de examinar esses artigos da Mozilla , parece que não há como extrair dados de um objeto FormData. Você só pode usá-los para criar FormData para enviar por meio de uma solicitação AJAX.

Também acabei de encontrar esta pergunta que afirma a mesma coisa: FormData.append ("key", "value") não está funcionando .

Uma maneira de contornar isso seria criar um dicionário regular e convertê-lo em 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 você quiser depurar um objeto FormData simples, também poderá enviá-lo para examiná-lo no console de solicitação de rede:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
Ryan Endacott
fonte
Bem, isso seria uma boa ideia, eu envolvia FormData em um método auxiliar e depois passava o literal do objeto. Em seguida, salve-o, caso deseje analisá-lo mais tarde.
2
versões recentes do chrome e do firefox agora fornecem um iterador:myFormData.entries()
rloth 29/06
1
No momento da redação deste documento, não havia como acessar o FormData. Atualizei a resposta para refletir a nova API. Obrigado pelo heads-up rloth!
22816 Ryan Endacott
2
Eu acho que é também interessante notar que você pode pegar os dados de um formulário existente usando: var formData = new FormData(formElement). Se você estiver usando JQuery, você pode, portanto, fazer isso: var formData = new FormData($('#formElementID')[0]). Em seguida, acrescente os dados conforme necessário.
Peter Valadez
Para iterar FormDatano IE / Edge: stackoverflow.com/questions/37938955/…
cs_pupil
78

Resposta curta

console.log(...fd)

Resposta mais longa

Se você deseja inspecionar a aparência do corpo bruto, use o construtor Response (parte da API de busca)

var fd = new FormData

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

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

Alguns desejo sugerem registrando cada entrada de entradas, mas a console.logtambém pode ter vários argumentos
console.log(foo, bar)
para tomar qualquer número de argumento que você poderia usar o applymétodo e chamá-lo como tal: console.log.apply(console, array).
Mas há uma nova maneira do ES6 de aplicar argumentos com o operador de propagação e o iterador
console.log(...array).

Sabendo disso, e o fato de o FormData e as duas matrizes possuírem um Symbol.iteratormétodo em seu protótipo, você pode simplesmente fazer isso sem precisar fazer um loop sobre ele ou ligar .entries()para obter o iterador

var fd = new FormData

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

console.log(...fd)

Sem fim
fonte
2
operador de propagação !! Excelente e realmente simples, exibe os dados do formulário no formato psuedo Json. Obrigado - pela nova resposta, eu recebo [[PromiseStatus]]: "pendente"
platinums
5
Ou a partir do console da Web, basta escrever[...fd]
Endless
sinos do inferno - você fez de novo @ Endless. que método é chamado usando os colchetes?
Platinums
bem, os colchetes são apenas uma matriz e você está criando uma nova. Você está se espalhando as entradas com ...a partir FormData para criar a nova matriz com todos os itens, então o console simplesmente despejar o resultado da última linha que você escreveu
Sem Fim
1
melhor resposta aqui - deve remover todo o gumpf e deixar apenas o 2º trecho de código - muito obrigado
danday74
39

Eu uso o formData.entries()método Não tenho certeza sobre todo o suporte ao navegador, mas funciona bem no Firefox.

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

Também existe formData.get()e formData.getAll()com suporte mais amplo ao navegador, mas eles apenas trazem os Valores e não a Chave. Veja o link para mais informações.

Eco Fantasma
fonte
3
Finalmente, é fácil procurar objetos FormData! Isso funcionou para mim após a atualização para o Chrome 50 (lançado ontem, 13 de abril de 2016).
jbb
2
var par de lança erros para mim. Substituindo-o na parece imprimir algo, pelo menos, no entanto não é uma chave ou valor como estados MDN.
Johnny Welker
1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625 02/09
para ... of is ES6feature e funcionará apenas em determinados navegadores. Excluindo qualquer versão do IE de acordo com o MDN
Zanshin13
para of não é suportado na maioria dos IE. suportado apenas na borda IE
mingca
11

Em certos casos, o uso de:

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

é impossível.

Eu usei esse código em substituição:

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

Não é um código muito inteligente, mas funciona ...

Espero que seja de ajuda.

Luc
fonte
1
Eu lançaria a instrução if para verificar doneprimeiro. doneé a bandeira oficial; se donefor falso ou não especificado, valueserá um item válido (mesmo que contenha o valor undefined). Quando doneestá presente e true, o fim da sequência foi atingido e valuenem precisa ser definido. Se valuefor definido quando donefor true, valueserá interpretado como o valor de retorno do iterador. Desenvolvedor.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Triynko
10

Quando estou trabalhando no Angular 5+ (com TypeScript 2.4.2), tentei da seguinte maneira e funciona exceto um erro de verificação estática, mas também for(var pair of formData.entries())não está funcionando.

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

Verifique no Stackblitz

Gurkan Yesilyurt
fonte
+ não é compatível com o IE 11 (value, key) => {... Uma dor de cabeça !
Delphine
1
legais. quero te dar 10 estrelas.
Abdullah Nurum 13/05/19
10

Método Fácil

Eu usei esse código na angular 8

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

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

Soluções ES6 +:

Para ver a estrutura dos dados do formulário:

console.log([...formData])

Para ver cada par de valores-chave:

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

Aqui está uma função para registrar entradas de um objeto FormData no console como um 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);
};

Documento MDN sobre .entries()

Documento MDN .next()e.done

2540625
fonte
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) {


            },

       });
}
turco esparso
fonte
+ não é compatível com o IE 11 for...of... Uma dor de cabeça !
Delphine
2

Você precisa entender que FormData::entries()retorna uma instância de Iterator.

Pegue este exemplo de formulário:

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

e esse loop JS:

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

No angular 7 eu tenho entradas no console usando a linha de código abaixo.

formData.forEach(entries => console.log(entries));
Yousuf
fonte
2

Já respondi, mas se você deseja recuperar valores de uma forma fácil de um formulário enviado, pode usar o operador de spread combinado com a criação de um novo Mapa iterável para obter uma boa estrutura.

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

ngr
fonte
embora - este tem um problema com inp_nam [some_mult] [] - apenas o último é visto
halfbit
2

no typeScriptde angular 6, este código está funcionando para mim.

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

ou para todos os valores:

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

Tente esta função:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
Mauro
fonte
2
Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
13139 Johan Johan
0

O MDN sugere o seguinte formulário:

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 adicionar ES + Polyfills , caso o navegador ou o ambiente não suporte as últimas API JavaScript e FormData.

Eu espero que isso ajude.

Manioz
fonte
Você testou esse código antes de executá-lo? formData()deve ser capitalizado, em primeiro lugar. Além disso, sua for ... of looplinha 3 está chamando implicitamente FormData.entries, você pode ver isso executando new FormData()[Symbol.iterator]no console. Finalmente, se você executar este em navegadores como o Borda, que não suportam FormData.entries, você obtém resultados inesperados, como a impressão dos nomes de métodos disponíveis no objeto FormData:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun