将带有嵌套数组的对象转换为 FormData

Question

我有这个对象

{
  "Data1": 1,
  "Data2": "some string",
  "Data3": [
    {
      "ID": 0,
      "Name": "some name",
      "SomeArray": []
    },
    {
     "ID": 0,
     "Name": "another name",
     "SomeArray": [
       "DataA": 0,
       "DataB": "some data again"
     ]
    }],
  "Data4": "some string again"
}

它将在控制器中接收的模型是这样的：

public class Data 
{
   public int Data1 { get; set; }
   public string Data2 { get; set; }
   public List<AnotherClass> Data3 { get; set; }
   public string Data4 { get; set; }
}

public class AnotherClass
{
   public int ID { get; set; }
   public string Name { get; set; }
   public List<DataList> SomeArray { get; set; }
}

public class DataList
{
   public int DataA { get; set; }
   public string DataB { get; set; }
}

要在Data3设置的数据来自一个表，其中从模态弹出窗口中检索新输入并填充到表中。 SomeArray数据来自使用Select2工具在下拉列表中设置多个选项的下拉列表。

这个想法是，一旦用户单击“保存”，它将获取所有数据，包括表中的数据并形成此 JSON 对象。 从这个对象，我想把它转换成一个FormData 。 但是，当它迭代到Data3 ，即使我对其进行字符串化，它也不会将其转换为对象数组。 我也试过这个Convert JS Object to form data但没有成功。

这是我到目前为止所做的：

var details = GetDetails(); // This contains `Data1`, `Data2` and `Data4`
var data3 = GetData3FromTable(); // This contains the list of `Data3`

var result = new FormData();
for (var key in details) {
   result.append(key, details[key]);
}

result.append("Data3", JSON.stringify(data3));
result.append("UploadFile", $("#upload")[0].files[0]);

// do ajax put or post after this line

是否有任何 jquery 或 javascript 插件可以用来将此对象转换为FormData ？ 或者有没有其他方法可以将其转换为FormData ？

Answer 1

我找到了这个链接object-to-form-data ，它可以转换任何对象，包括嵌套数组和上传文件到FormData 。 但是，只需要进行一项更改：

从链接中，替换objectToFormData(obj[property], fd, property); with objectToFormData(obj[property], fd, formKey); . 这样，它将原始属性设置为键。 当FormData传递给控制器​​时，它的输出将是这样的：

Data1: 1
Data2: some string
Data3[0][ID]: 0
Data3[0][Name]: some name
Data3[0][SomeArray]: []
Data3[1][ID]: 0
Data3[1][Name]: another name
Data3[1][SomeArray][0][DataA]: 0
Data3[1][SomeArray][0][DataB]: some data again
Data4: some string again

我希望这可以帮助其他人！

Answer 2

您可以在 HTML 表单中发送深度嵌套的数据，但我注意到不同的 Web 服务器可能会以不同的方式解释更复杂的结构，因此您可能需要检查您的框架/应用程序的中间件以确保正确解码。 您可能会发现将值读入 Javascript 并从那里发送数据更容易。

您的Data3对象可以使用以下内容表示：

<input type="text" name="data[Data3][0][id]" value="0">
<input type="text" name="data[Data3][0][Name]" value="some name">
<input type="text" name="data[Data3][0][SomeArray][]" value="">

您需要一个包含子元素的“父”字段（本例中的data ）。

请注意，您必须小心任何[] - 您可能需要像上面那样手动指定数组索引，否则将不会遵守值的“分组”。

还要注意以[]结尾的名称：这些字段仍然会发送值，即使它是一个空字符串，因此您可能需要将它们过滤掉。