Как объединить данные FormData в один JavaScript объект с несколькими свойствами

Оффтоп javascript
1

Проблема с сохранением FormData в localStorage

У меня есть форма заказа, из которой я создаю объект FormData:

const orderFormData = new FormData();
orderFormData.append('ClientName', this.orderForm.get('clientName').value);
orderFormData.append('Address', this.orderForm.get('address').value);
orderFormData.append('PhoneNumber', this.orderForm.get('phone').value);

Когда пытаюсь сохранить FormData напрямую в localStorage, получаю пустой объект:

saveToStorage(formData) {
    localStorage.setItem('orderInfo', JSON.stringify(formData));
}

Текущий подход и проблема

Я нашел способ перебрать FormData, но создается много отдельных объектов:

formData.forEach((value, key) => {
    let propertyName = key;
    let propertyValue = value;
    let singleProperty = {
        [propertyName]: propertyValue
    };
    this.finalOrderData.push(singleProperty);
});

Получается такой результат:

[{ClientName: "Иван"}, {Address: "ул. Пушкина 15"}, {PhoneNumber: "123456"}]

А мне нужен один объект со всеми свойствами:

[{
    ClientName: "Иван",
    Address: "ул. Пушкина 15", 
    PhoneNumber: "123456"
}]

Как правильно собрать все пары ключ-значение из FormData в единый объект? Помогите разобраться с этой задачей.

2

Твоя ошибка в том что ты каждый раз новый объект создаешь внутри цикла. Вынеси объявление объекта наружу и будет работать:

let combinedObject = {};
formData.forEach((value, key) => {
    combinedObject[key] = value;
});
this.finalOrderData.push(combinedObject);

Или вообще без цикла можно - есть встроенный метод Object.fromEntries(). Он как раз для таких случаев и сделан, превращает пары ключ-значение в обычный объект.

3

А зачем вообще через FormData? Если данные простые, можно сразу объект создать из значений формы. Или используй Object.fromEntries(formData) - это самый короткий способ. FormData обычно для отправки файлов нужен, а тут обычные поля же?

4

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

let finalObject = {};
formData.forEach((value, key) => {
    finalObject[key] = value;
});

Или еще проще через spread оператор: let result = {...Object.fromEntries(formData)}; Потом уже этот объект в массив засовывай если надо.