将 JSON 数组对象附加到 formdata

Posted 2023-05-08

【中文标题】将 JSON 数组对象附加到 formdata

【英文标题】：Appending JSON array object to formdata

【发布时间】：2020-12-03 18:17:18

【问题描述】：

我有一个名为联系人的 JSON 数组对象：

var contacts = [];

经过一些处理，contacts 的值如下所示：

[ "Country":"country 1", "Phone":"123" , "Country":"country 2", "Phone":"456" ]

现在我想将此添加到表单数据中的“联系人”名称中。为此我使用：

var formdata = new FormData();
formdata.append("Contacts", JSON.stringify(contacts));

当我在按钮单击时尝试alert(JSON.stringify(formdata)); 时，我得到：

\"Contacts\":\"[\\\"Country\\\":\\\"country 1\\\",\\\"Phone\\\":\\\"123\\\",
\\\"Country\\\":\\\"country 2\\\",\\\"Phone\\\":\\\"456\\\"]\""

问题是在 API 中，它没有检测到联系人列表。 我尝试使用 POSTMAN 作为：

Contacts[0].Country : country 1
Contacts[0].Phone : 123
Contacts[1].Country : country 2
Contacts[1].Phone : 456

API 在这种情况下接受数据。 API 接受除此之外的其余 formdata 字段，仅共享此信息以排除 api 问题。

API 接受联系人集合以及姓名、年龄和联系人等其他字段。

【问题讨论】：

您似乎没有按照 API 的预期发送数据，但您没有向我们提供有关您的 API 接受什么的任何详细信息。此外，您已经证明您的 formdata 对象包含您需要的所有信息，因此它可能不是问题的根源。

现在将添加参考。谢谢:)

提示：console.log() 而不是 alert()。

@tadman 为什么？它似乎显示了正确的数据？

什么“API”？你需要告诉我们更多关于它在做什么、它期望什么，以及最重要的是，你是如何发送这个的。

【参考方案1】：

如果您的 API 接受该格式的数据，则不能将其作为 JSON 发送，您需要为您提到的每一行创建一个单独的 FormData 条目。

例如

const contacts = [ "Country":"country 1", "Phone":"123" , "Country":"country 2", "Phone":"456" ];


var formdata = new FormData();

// This could be made fancier but it explains how to fix the problem
for (let i=0; i < contacts.length; i++) 
   formdata.append(`Contacts[$i].Country`, contacts[i].Country);
   formdata.append(`Contacts[$i].Phone`, contacts[i].Phone);

请注意，json-form-data 会为您完成这项工作

const data = 
  Contacts: [
    "Country": "country 1",
    "Phone": "123"
  , 
    "Country": "country 2",
    "Phone": "456"
  ]
;

const formData = jsonToFormData(data);
for (const [key,value] of formData.entries()) 
    console.log(`$key: $value`);

<script src="https://unpkg.com/json-form-data@^1.7.0/dist/jsonToFormData.min.js"></script>

【讨论】：

@Neo 请注意，我在初始实现中修复了一个错误

谢谢伙计。但我只是担心为什么标准的代码实践对我不起作用:(

我不明白这个问题，它不起作用，因为您的 API 不支持联系人数据的 JSON，它需要这种表单数据编码样式。请注意，有一个包可以为您做到这一点npmjs.com/package/json-form-data