Как преобразовать FormData в JSON без jQuery

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

Чтобы преобразовать FormData в JSON, вы можете воспользоваться следующим кодом:

const formDataToJson = (formData) => JSON.stringify(Object.fromEntries(formData));
const formElement = document.querySelector('form');
const jsonData = formDataToJson(new FormData(formElement));

На месте formElement укажите ваш элемент формы в DOM, тогда переменная jsonData будет содержать JSON-строку.

Разбор быстрого решения

Функция Object.fromEntries() преобразует список пар ключ-значение в объект. В паре с FormData это позволяет конвертировать данные формы в обыкновенный объект, который затем JSON.stringify приводит к виду строки JSON.

Обработка нескольких значений

Если кто-то из полей формы возвращает множественные значения, например, при использовании мультиселекта, обращайтесь с ними так:

const formDataToJson = (formData) => {
  const object = {};
  formData.forEach((value, key) => {
    if (!object.hasOwnProperty(key)) {
      object[key] = value;
    } else {
      if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
      }
      object[key].push(value);
    }
  });
  return JSON.stringify(object);
};

Тут мы проверяем, наличие ключа в объекте, и если он уже присутствует, то преобразуем прикреплённые значения в массив.

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

Представьте, что преобразование FormData в JSON -- это ни что иное, как аккуратно выполненная перепаковка данных:

FormData (🛄): | field1 👕 | field2 🧦 | field3 👖 |

Теперь эти данные нужно упаковать в контейнер JSON для их отправки по просторам интернета:

const formData = new FormData();
formData.append('field1', 'Value1');
formData.append('field2', ['ValueA', 'ValueB']);
formData.append('field3', 'ValueX');

Процесс перепаковки можно представить так:

🛄 => 📦 {"field1": "Value1", "field2": ["ValueA", "ValueB"], "field3": "ValueX"}

Таким образом, данные переложены в контейнер JSON, готовый к отгрузке:

Контейнер JSON (📦): {"field1": "Value1", "field2": ["ValueA", "ValueB"], "field3": "ValueX"}

Пара ключ-значение — это некий предмет, аккуратно упакованный для отправки в виртуальном мире.

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

Отправка на сервер

Если вам приходится отправлять JSON на сервер, используйте Fetch API:

fetch('https://example.com/submit', {
  method: 'POST',
  body: jsonData,
  headers: {
    'Content-Type': 'application/json'
  }
});

Не забывайте устанавливать заголовок Content-Type с значением 'application/json', чтобы сервер был в курсе, в каком формате предстоит принять данные.

Сериализация сложных объектов

Для сериализации более сложных объектов нужно подходить индивидуально. Вы можете определить метод toJSON(), который поможет произвести корректное преобразование объекта в строку JSON с помощью JSON.stringify:

class CustomObject {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }

  toJSON() {
    return {
      compositeProperty: `${this.prop1}_${this.prop2}`
    };
  }
}

const customObj = new CustomObject('Топливо', 'Искра');
const jsonData = JSON.stringify(customObj);

Метод toJSON() позволяет вам управлять тем, как ваши объекты будут представлены в формате JSON.

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

1. FormData – Web API | MDN — подробная информация о FormData на MDN.
2. Преобразование FormData (HTML5 объекта) в JSON – Stack Overflow — отобранные сообществом решения по преобразованию FormData в JSON.
3. FormData – JavaScript.info — понятные объяснения и примеры использования FormData.
4. Преобразование JS-объектов в FormData для сложных структур — Gist на GitHub, помогающий преобразовать сложные объекты в FormData.
5. .serializeArray() – jQuery — метод jQuery для преобразования значений формы в JSON.
6. Применение метода FormData.append() — руководство MDN за методом append и связанными с ним вопросами.
7. Использование FormData для AJAX-загрузки файлов — обзор использования FormData для загрузки файлов с помощью AJAX.