Простые способы преобразования данных формы в объект JSON [дубликат]

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

Я создал Функция для этого

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 от formData Object до JSON Keys в каждом Itration.

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

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

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>

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

import {fromPairs} from 'lodash';

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

Вы можете достичь этого, используя объект 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);

});

Если у вас несколько записей с тем же именем, например, если вы используете <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 );
  }

Метод 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. Я все еще ищу окончательное решение для поддержки всех основных браузеров.