Как использовать массив на основе формы с объектом FormData?

Question

Я пытаюсь использовать новый элемент FormData для преобразования формы в одну (вложенную) строку JSON.

Это пример структуры формы:

1. name
2. вложенный [ключ]
3. вложенный [ключ2]
4. вложенный [ключ3]

Используя следующий код, я получу один плоский объект JSON, не вложенная версия.

    var formData = new FormData(document.getElementById("testForm"));
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
    });
    var json = JSON.stringify(object);
    return json;

Результат:

{"name":"test","nested[key]":"test","nested[key2]":"test","nested[key3]":"test"}

Answer 1

Посмотрите документацию FormData здесь: https://developer.mozilla.org/en-US/docs/Web/API/FormData

В моем примере ниже я использовал метод entry () и преобразовал его в массив, чтобы использовать метод forEach. и построить объект.

// Get the form
var myForm = document.getElementById('myForm');
// Create FormData object
var formData = new FormData(myForm);

// Loop through the entries and append to the object
var result = {};
Array.from(formData.entries()).forEach(function(entr) {
  var key = entr[0];
  var value = entr[1];
  result[key] = value;
});

// Print the result
console.log(result);

<form id="myForm">
Name <input name="name" value="a"/>
</form>

Answer 2

вы можете попробовать set с lodash:

import { set } from 'lodash';

var formData = new FormData(document.getElementById("testForm"));
var object = {};
formData.forEach(function(value, key){
    set(object, key, value);
});

установить документ здесь: https://lodash.com/docs/4.17.14#set