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

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

19
form-data javascript

8 ответов

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

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

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

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>
5

если у вас есть несколько записей с одинаковым именем, например, если вы используете <SELECT multiple> или иметь несколько <INPUT type="checkbox"> С тем же именем, вы должны позаботиться об этом и сделать массив значений. В противном случае вы получите только последнее выбранное значение.

вот современный ES6-вариант:

function formToJSON( elem ) {
  let output = {};
  new FormData( elem ).forEach(
    ( value, key ) => {
      // Check if property already exist
      if ( Object.prototype.hasOwnProperty.call( output, key ) ) {
        let current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
  );
  return JSON.stringify( output );
}

немного более старый код (но все еще не поддерживается IE11, так как он не поддерживает ForEach или entries on FormData)

function formToJSON( elem ) {
  var current, entries, item, key, output, value;
  output = {};
  entries = new FormData( elem ).entries();
  // Iterate over values, and assign to item.
  while ( item = entries.next().value )
    {
      // assign to variables to make the code more readable.
      key = item[0];
      value = item[1];
      // Check if key already exist
      if (Object.prototype.hasOwnProperty.call( output, key)) {
        current = output[ key ];
        if ( !Array.isArray( current ) ) {
          // If it's not an array, convert it to an array.
          current = output[ key ] = [ current ];
        }
        current.push( value ); // Add the new value to the array.
      } else {
        output[ key ] = value;
      }
    }
    return JSON.stringify( output );
  }
5

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

пример:

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);

});
4

Простая В Использовании Функция

Я Создал Функция Для Этого 

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 loop я использовал keys от объекта formData до ключей JSON в каждом Itration.

вы найдете этот код в моей библиотеке JS на GitHub, предложите мне, если он нуждается в улучшении, я разместил код здесь https://github.com/alijamal14/Utilities/blob/master/Utilities.js

4

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

вот более простая версия для поддержки Safari, Chrome, Firefox и Edge

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

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

    return convertedJSON;
}

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

3

Если вы используете lodash, это можно сделать кратко с помощью fromPairs

import {fromPairs} from 'lodash';

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

вы можете попробовать это

formDataToJSON($('#form_example'));

# Create a function to convert the serialize and convert the form data
# to JSON
# @param : $('#form_example');
# @return a JSON Stringify
function formDataToJSON(form) {
    let obj = {};
    let formData = form.serialize();
    let formArray = formData.split("&");

    for (inputData of formArray){
        let dataTmp = inputData.split('=');
        obj[dataTmp[0]] = dataTmp[1];
    }
    return JSON.stringify(obj);
}
0