Как просмотреть ключи объекта FormData в JavaScript

Быстрый ответ

Для быстрого просмотра ключей и значений в FormData используйте метод entries():

// Предположим, что у нас имеется FormData, наполненный данными.
const formData = new FormData();

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`); // Простой и наглядный способ логирования.
}

Для преобразования FormData в стандартный объект примените оператор расширения и функцию Object.fromEntries. Этот способ прост и быстр:

const formDataObj = Object.fromEntries(formData.entries());
console.log(formDataObj); // И вот перед вами объект данных, и не было нужды прибегать к магии!

Подробности касательно проверки

Предварительное ознакомление с данными это хорошо, но осмотримся глубже и рассмотрим подробные способы анализа FormData.

Продвинутые методы проверки

Использование 'console.table'

Для структурированного отображения данных существует функция console.table():

// Опрятная визуализация содержимого FormData.
console.table([...formData.entries()]);

Подробнее об этом расскажет наш спикер на видео

Прямая инспекция: как выглядит FormData при отправке

Хотите узнать, как FormData выглядит перед отправкой на сервер? Загляните внутрь с помощью API Response:

// Техническое осмотрение FormData.
new Response(formData).text().then(console.log);

Просмотр AJAX-запросов

При отправке FormData с использованием XMLHttpRequest или Fetch вы можете просмотреть его содержимое в вкладке Сеть (Network) в инструментах разработки браузера:

const xhr = new XMLHttpRequest();
xhr.open("POST", "/submit-form");
xhr.send(formData);
// Подготовьтесь к исследованию во вкладке "Сеть".

Учет подводных камней

Обработка FormData с файлами

Когда дело доходит до файлов, их сложнее обнаружить. Разместили файл следующим образом:

formData.append("file", fileInput.files[0]);
[...formData].forEach(([key, value]) => {
  console.log(key, value instanceof Blob ? value.name : value);
  // Так можно заметить скрытые файлы.
});

Совместимость: Ограничения FormData

Пожалуйста, проверьте совместимость с браузерами перед тем, как воспользоваться методами FormData. Internet Explorer напоминает родственника, который всегда недоволен нововведениями.

Сложные структуры данных

Для комплексных структур данных бывает полезно преобразовать FormData в JSON, словно вы адаптируете данные для интеграции с API:

const jsonFormData = JSON.stringify(Object.fromEntries(formData));

Анализ крайних случаев

Работа с ключами, связанными с множеством значений

Если в FormData один ключ связан с несколькими значениями, метод getAll(key) поможет вам их извлечь.

Межплатформенное взаимодействие

Онлайн-среды для программирования, такие как Stackblitz или CodePen, превосходно подходят для отладки и обмена кодом в режиме реального времени.

Работа с TypeScript

Используете TypeScript? Не забудьте аккуратно настроить типизацию перед работой с FormData.

Отладка на профессиональном уровне

Новые возможности Console.log

Для более комфортной отладки опробуйте console.log.apply, который позволяет вам записывать логи с переменным числом параметров:

console.log.apply(console, [...formData.entries()]);
// Великолепный "однострочник"!

Возможности ES6

Используйте возможности ES6, такие как оператор расширения и стрелочные функции, для удобной работы с данными.

Визуализация

Представим процесс проверки FormData как заглядывание в обычный конверт с прозрачным окошком:

FormData (📨): Хранит пары ключ/значение.

Сначала конверт непрозрачен:

const formData = new FormData(); // 📨 (Содержимое пока скрыто от вас)

Но процесс проверки – это как взглянуть через специальную линзу:

for(let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
    // Изучение каждой пары открывает секреты.
}

И теперь в содержимое можно увидеть, как в приведенную ниже таблицу:

Так что console.log(formData) теперь не составит труда!

Полезные материалы

1. FormData – Веб-API | MDN
2. Использование объектов FormData – Веб-API | MDN
3. FormData: метод append() – Веб-API | MDN
4. Fetch – JavaScript Info
5. Как преобразовать FormData (HTML5 объект) в JSON – Stack Overflow
6. HTTP клиент на основе промисов для браузера и node.js – Axios