Como inspecionar os dados do FormData

Neste artigo você vai aprender a inspecionar os dados do FormData, ou seja, debugar o que está no FormData

Fala programador(a), beleza? Bora aprender mais sobre FormData!

O FormData é um objeto que carrega dados de formulário

Geralmente adicionamos novos dados com o método append

Porém não há uma forma tão simples de inspecioná-lo, a melhor alternativa hoje é utilizando um for of

Veja o exemplo abaixo:

var formData = new FormData();

formData.append('name', 'Matheus');
formData.append('job', 'Programador');

for (const data of formData.entries()) {
    console.log(`${data[0]} = ${data[1]}`); 
}

// "name = Matheus"
// "job = Programador"

Primeiramente criamos um FormData com dados fictícios, para ilustrar o exemplo

Depois criamos a estrutura for of, com uma variável temporária de data

Esta variável vai carregar a chave e valor de cada item presente no FormData

Acessando o índice 0 temos a chave, e o 1 temos o valor

Agora ficou mais simples, né? 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você viu como inspecionar os dados do FormData

Utilizamos um operador chamado for of, que faz o loop no FormData

A partir deste loop podemos acessar as chaves e valores do objeto, desmistificando o que há nele

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Atualizando o exemplo:

O for of continua funcionando redondo, pode usar sem medo

Só que o exemplo ali de cima é de um tempo em que a gente ainda escrevia var, e dá pra deixar ele mais enxuto hoje

const formData = new FormData()

formData.append('name', 'Matheus')
formData.append('job', 'Programador')

console.log(`${chave} = ${valor}`)
}

// name = Matheus
// job = Programador

Mesmo resultado, menos ruído 🙂

Por que o console.log do FormData não mostra nada?

Essa é a dúvida que mais aparece antes até de tentar o loop

Você dá um console.log(formData) esperando ver os campos e vem um objeto que parece vazio

Calma, os dados não sumiram

O FormData guarda o conteúdo internamente, ele não expõe os campos como propriedades comuns do objeto

Por isso o console não tem o que listar ali

A porta de entrada é iterar, e é exatamente isso que o entries() faz

const formData = new FormData()
formData.append('name', 'Matheus')

console.log(formData)
// o console não mostra os campos

O spread dentro do array faz o mesmo trabalho do for of, só que em uma linha

Bom pra quando tu só quer bater o olho e seguir a vida

Transformando o FormData em objeto (e em JSON):

Às vezes tu não quer só olhar, quer o dado na mão pra mandar pro backend ou jogar num log mais limpo

Dá pra converter o FormData em um objeto comum de uma tacada só

const formData = new FormData()

formData.append('name', 'Matheus')
formData.append('job', 'Programador')

const objeto = Object.fromEntries(formData)

console.log(objeto)
// { name: 'Matheus', job: 'Programador' }

console.log(JSON.stringify(objeto))

Com o objeto na mão o console fica bonito, dá pra expandir, copiar, comparar

Tome cuidado com uma pegadinha aqui!

Se o formulário tiver mais de um campo com o MESMO name (checkbox, select multiple, vários arquivos), o objeto fica só com o último valor

Já me ferrei uma vez achando que o bug estava no backend, e era o Object.fromEntries comendo os repetidos haha

Nesse caso o caminho é o getAll, que é o próximo tópico…

E se eu quiser inspecionar só um campo?

Nem sempre você precisa do loop inteiro

Quando a dúvida é pontual ("esse campo chegou mesmo?"), o próprio FormData tem métodos de consulta

formData.get('name')
// primeiro valor da chave, ou null se não existir

formData.getAll('skills')
// array com TODOS os valores da mesma chave

formData.has('job')
// true ou false

O get devolve o primeiro valor e null quando a chave não existe, então aquele null no console já é a resposta: o campo não entrou

O getAll é o herói dos campos repetidos, ele devolve tudo em array

E o has serve pra checagem rápida, sem precisar olhar valor nenhum

Se você conhece um Map, a lógica é bem parecida, chave e valor, com a diferença de aceitar chaves repetidas

Inspecionando o FormData de um formulário de verdade:

O exemplo com append é ótimo pra entender, mas no dia a dia o FormData quase sempre nasce de um form da tela

Aí o lugar certo de inspecionar é dentro do submit, antes de mandar pro servidor

const form = document.querySelector('form')

form.addEventListener('submit', (e) => {
e.preventDefault()

const formData = new FormData(form)

console.log(chave, valor)
}
})

O preventDefault ali é só pra página não recarregar e levar embora o seu console

E agora o erro clássico que todo mundo comete pelo menos uma vez: campo SEM o atributo name simplesmente não entra no FormData

Se um input está na tela, está preenchido e não aparece no loop, olha o name antes de culpar o código 🙂

Outro detalhe: campo de arquivo não vira texto

O valor vem como um File, então no console você inspeciona as propriedades dele (nome, tipo, tamanho) em vez de esperar uma string

const arquivo = formData.get('foto')

console.log(arquivo.name, arquivo.type, arquivo.size)

Perguntas frequentes sobre inspecionar o FormData:

Por que o console.log do FormData aparece vazio?

Porque o FormData não expõe os campos como propriedades do objeto, o conteúdo fica interno

Como ver todos os dados do FormData de uma vez?

Como transformar o FormData em JSON?

Converta pra objeto com Object.fromEntries(formData) e passe esse objeto pro JSON.stringify

Lembrando: campos com o mesmo name perdem os repetidos nessa conversão, aí o certo é montar na mão usando getAll

Dá pra inspecionar arquivos dentro do FormData?

Dá sim, só que o valor não é texto, é um objeto File

Inspecione as propriedades dele, tipo name, type e size

Por que meu campo não aparece no FormData?

Na esmagadora maioria das vezes é o atributo name faltando no input, ou o campo estar fora da tag form que você passou pro new FormData(form)

Botão desabilitado e input sem name são os suspeitos de sempre