Eu tentei console.log
e 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.
javascript
form-data
Penny Liu
fonte
fonte
key of fd
vez dekey in fd
. Ainda não sei por que isso ainda é tecnicamente, mas funciona. Documentação aqui .Respostas:
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 .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:
Se você quiser depurar um objeto FormData simples, também poderá enviá-lo para examiná-lo no console de solicitação de rede:
fonte
myFormData.entries()
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.FormData
no IE / Edge: stackoverflow.com/questions/37938955/…Resposta curta
Resposta mais longa
Se você deseja inspecionar a aparência do corpo bruto, use o construtor Response (parte da API de busca)
Alguns desejo sugerem registrando cada entrada de entradas, mas a
console.log
também pode ter vários argumentosconsole.log(foo, bar)
para tomar qualquer número de argumento que você poderia usar o
apply
mé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.iterator
método em seu protótipo, você pode simplesmente fazer isso sem precisar fazer um loop sobre ele ou ligar.entries()
para obter o iteradorfonte
[...fd]
...
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ê escreveuEu 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
Também existe
formData.get()
eformData.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.fonte
for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
ES6
feature e funcionará apenas em determinados navegadores. Excluindo qualquer versão do IE de acordo com o MDNEm certos casos, o uso de:
é impossível.
Eu usei esse código em substituição:
Não é um código muito inteligente, mas funciona ...
Espero que seja de ajuda.
fonte
done
primeiro.done
é a bandeira oficial; sedone
for falso ou não especificado,value
será um item válido (mesmo que contenha o valorundefined
). Quandodone
está presente etrue
, o fim da sequência foi atingido evalue
nem precisa ser definido. Sevalue
for definido quandodone
fortrue
,value
será interpretado como o valor de retorno do iterador. Desenvolvedor.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…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.Mostrar snippet de código
Verifique no Stackblitz
fonte
(value, key) => {..
. Uma dor de cabeça !Método Fácil
Eu usei esse código na angular 8
fonte
Soluções ES6 +:
Para ver a estrutura dos dados do formulário:
Para ver cada par de valores-chave:
fonte
Aqui está uma função para registrar entradas de um objeto FormData no console como um objeto.
Documento MDN sobre
.entries()
Documento MDN
.next()
e.done
fonte
fonte
for...of..
. Uma dor de cabeça !Você precisa entender que
FormData::entries()
retorna uma instância deIterator
.Pegue este exemplo de formulário:
e esse loop JS:
fonte
No angular 7 eu tenho entradas no console usando a linha de código abaixo.
fonte
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)])
fonte
no
typeScript
deangular 6
, este código está funcionando para mim.ou para todos os valores:
fonte
Tente esta função:
fonte
O MDN sugere o seguinte formulário:
alternativamente
Considere adicionar ES + Polyfills , caso o navegador ou o ambiente não suporte as últimas API JavaScript e FormData.
Eu espero que isso ajude.
fonte
formData()
deve ser capitalizado, em primeiro lugar. Além disso, suafor ... of loop
linha 3 está chamando implicitamente FormData.entries, você pode ver isso executandonew 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'