如何在 FormData object 中使用基于数组的表单？

Question

我正在尝试使用新的 FormData 元素将表单转换为一个（嵌套的）JSON 字符串。

这是示例表单结构：

1. 姓名
2. 嵌套[键]
3. 嵌套[key2]
4. 嵌套[key3]

使用以下代码，我将得到一个平面 JSON object，而不是嵌套版本。

    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

在下面的示例中，我使用了 entries() 方法并将其转换为能够使用 forEach 方法并构建 object 的数组。

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

尝试这个

 var Obj = {"name":"test","nested[key]":"test","nested[key2]":"test","nested[key3]":"test"}; var newObj={}; Object.keys(Obj).forEach(function (key) { if(key.toString().includes("[")) newObj[key.toString().match(/\[.*?\]/g).pop().slice(1, -1)] =Obj[key]; else newObj[key] =Obj[key]; }); console.log(newObj);

Answer 3

您可以尝试使用 lodash set ：

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