Как преобразовать объект FormData (объект HTML5) в JSON

Question

Как преобразовать объект HTML5 FormData в JSON? Без Jquery и обработки вложенных свойств в FormData как объект.

Answer 1

Вы также можете использовать forEach на FormData объекта непосредственно:

var object = {}; 
formData.forEach(function(value, key){ 
    object[key] = value; 
}); 
var json = JSON.stringify(object); 

Answer 2

Вы можете достичь этого, используя объект FormData(). Этот объект FormData будет заполнен текущими ключами/значениями формы, используя свойство имени каждого элемента для ключей и их переданное значение для значений. Он также будет кодировать содержимое входного файла.

Пример:

var myForm = document.getElementById('myForm'); 
myForm.addEventListener('submit', function(event) 
{ 
    event.preventDefault(); 
    var formData = new FormData(myForm), 
     result = {}; 

    for (var entry of formData.entries()) 
    { 
     result[entry[0]] = entry[1]; 
    } 
    result = JSON.stringify(result) 
    console.log(result); 

}); 

Answer 3

Простота в использовании функции

Я создал A Function For This

function FormDataToJSON(FormElement){  
    var formData = new FormData(FormElement); 
    var ConvertedJSON= {}; 
    for (const [key, value] of formData.entries()) 
    { 
     ConvertedJSON[key] = value; 
    } 

    return ConvertedJSON 
} 

Пример

var ReceivedJSON = FormDataToJSON(document.getElementById('FormId');) 

В этом коде я создал пустую переменную JSON с использованием цикла for. Я использовал key s from formData Объект для ключей JSON в каждом Itration.

Вы найдете код в моем JS библиотеки на GitHub Do Предлагайте Me If It Needs Improvement я поместил здесь https://github.com/alijamal14/Utilities/blob/master/Utilities.js

Answer 4

метод FormData .entries код и for of выражение не поддерживается в IE11 и Safari.

Вот версия для проще поддерживать Safari, Chrome, Firefox и пограничный

function formDataToJSON(formElement) {  
    var formData = new FormData(formElement), 
     convertedJSON = {}; 

    formData.forEach(function(value, key) { 
     convertedJSON[key] = value; 
    }); 

    return convertedJSON; 
} 

Внимание: этот ответ не работает в IE11.
FormData не имеет метода forEach в IE11.
Я все еще ищу окончательное решение для поддержки всех основных браузеров.

Answer 5

Если вы используете lodash это может быть сделано сжато с fromPairs

import {fromPairs} from 'lodash'; 

const object = fromPairs(Array.from(formData.entries())); 

Answer 6

Вот способ сделать это в более функциональный стиль, без использования библиотеки.

Array.from(formData.entries()).reduce((memo, pair) => ({ 
    ...memo, 
    [pair[0]]: pair[1], 
}), {}); 

Пример:

document.getElementById('foobar').addEventListener('submit', (e) => { 
 
    e.preventDefault(); 
 

 
    const formData = new FormData(e.target); 
 
    const data = Array.from(formData.entries()).reduce((memo, pair) => ({ 
 
    ...memo, 
 
    [pair[0]]: pair[1], 
 
    }), {}); 
 
    document.getElementById('output').innerHTML = JSON.stringify(data); 
 
});

<form id='foobar'> 
 
    <input name='baz' /> 
 
    <input type='submit' /> 
 
</form> 
 

 
<pre id='output'>Input some value and submit</pre>