Appending JSON array object to formdata

Question

I have a JSON array object called contacts:

var contacts = [];

After some processing the value of contacts look like:

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

Now I want to add this to the "Contacts" name inside the formdata. For that I use:

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

When I try alert(JSON.stringify(formdata)); on button click I get:

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

The problem is that in the API, its not detecting the list of contacts. I tried using POSTMAN as:

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

API accepts data in that case. API accepts rest of the formdata fields except this, just sharing this info to rule out issue with api.

API accepts a collection of contacts as well as other fields like Name, Age and then Contacts.

It seems like you're not sending the data as your API expects but you haven't given us any detail about what your API accepts. Also, you've proven that your formdata object has all the info you need, so it's likely not the source of the problem. — Ruan Mendes
– Ruan Mendes, Commented Aug 13, 2020 at 20:46
What "API"? You need to tell us more about what it's doing, what it expects, and most importantly, how you're sending this. — tadman
– tadman, Commented Aug 13, 2020 at 20:50

Ruan Mendes · Accepted Answer · 2020-08-13 21:15:26Z

2

If your API accepts your data in that format, you cannot send it as JSON, you need to create a separate FormData entry for each of the lines you've mentioned.

For example

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);
}

Note that json-form-data does it for you

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>

edited Aug 13, 2020 at 21:15

answered Aug 13, 2020 at 20:53

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ruan Mendes Over a year ago

@Neo Note that I fixed a bug in my initial implementation

Neo Over a year ago

Thanks man. But I am just concerned why a standard practice of code didn't work for me :(

Ruan Mendes Over a year ago

I don't understand the question, it didn't work because your API didn't support JSON for the Contacts data, it requires this form data encoding style. Note that there's a package that does that for you npmjs.com/package/json-form-data

Collectives™ on Stack Overflow

Appending JSON array object to formdata

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related