将 JSON 数组对象附加到 formdata

Appending JSON array object to formdata

提问人:Neo 提问时间:8/14/2020 最后编辑:Neo 更新时间:8/14/2020 访问量:1854

问:

我有一个名为 contacts 的 JSON 数组对象:

var contacts = [];

经过一些处理后,的值如下所示:contacts

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

现在我想将其添加到formdata中的“联系人”名称中。为此,我使用:

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 接受联系人以及其他字段的集合,如姓名、年龄和联系人。

javascript jquery json API

评论

0赞 Ruan Mendes 8/14/2020
您似乎没有按照 API 预期发送数据,但您没有向我们提供有关 API 接受的内容的任何详细信息。此外,您已经证明您的 formdata 对象具有您需要的所有信息,因此它可能不是问题的根源。
0赞 Neo 8/14/2020
现在将添加参考。谢谢:)
2赞 tadman 8/14/2020
提示:而不是 .console.log()alert()
0赞 Ruan Mendes 8/14/2020
@tadman 为什么?它似乎显示了正确的数据?
0赞 tadman 8/14/2020
什么“API”?您需要告诉我们更多关于它在做什么、它期望什么,最重要的是,你是如何发送的。

答:

2赞 Ruan Mendes 8/14/2020 #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>

评论

1赞 Ruan Mendes 8/14/2020
@Neo 请注意,我在初始实现中修复了一个错误
0赞 Neo 8/14/2020
谢谢伙计。但我只是担心为什么标准的代码实践对我不起作用:(
1赞 Ruan Mendes 8/14/2020
我不明白这个问题,它不起作用,因为您的 API 不支持联系人数据的 JSON,它需要这种表单数据编码样式。请注意,有一个包可以为您执行此操作 npmjs.com/package/json-form-data