post data array with formData axios

Question

i will send array data using formData. the backend accepts the data array with a dash ; example if in postman using form-data like this:

id_barang : 122;288;383 (send 3 value id with dash ;)

if i use formData is it like this?

  data [
       {
          id_barang : 122
       },
       {
          id_barang : 288
       },
       {
          id_barang : 383
       }
    ]
    
     let barang = data.map(x => x.id_barang).join(";");
     const f = new FormData();
     f.append("id_barang", barang);


     //please correct me if i'm wrong

my backend

    id_barang_data := strings.Split(r.FormValue("id_barang"), ";") // => 1002;983;756
    
    for i, _ := range id_barang_data { // loop through the files one by one
            rSegAnalisaMethodDetail := models.SegAnalisaMethodDetail{}
            id_barang, err := strconv.Atoi(id_barang_data[i])
            if err != nil {
                responses.ERROR(w, http.StatusBadGateway, err)
            }

Aslam H · Accepted Answer · 2021-12-14 07:46:56Z

0

There is nothing wrong with your code. the only thing missing here is that you didn't provide a way of sending your request with axios. when you use FormData with axios you need to add 'Content-Type': 'multipart/form-data'. however if you don't add any files to Formdata then there is no need to use Formdata

Here is the compete action:

var banyakBarang = [
    { id_barang: 122 },
    { id_barang: 288 },
    { id_barang: 383 }
];

var barangString = banyakBarang.map(function(barang) {
    return barang.id_barang;
}).join(';');

var formData = new FormData();
formData.append('id_barang', barangString);

axios({
    method: 'post',
    url: '/x',
    data: formData,
    headers: {
        'Content-Type': 'multipart/form-data'
    },
});

Request Payload:

id_barang: 122;288;383

edited Dec 14, 2021 at 7:46

answered Dec 14, 2021 at 7:40

Aslam H

1,8195 gold badges27 silver badges49 bronze badges

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

4 Comments

Harry Wardana Over a year ago

I have used this, sir, but when I post, the data on the backend is not looped or only 1 is entered.. if you use postman the data works everything

Aslam H Over a year ago

You need to split (js) / explode (php) the value. Show your code how you handle it on the backend.

Harry Wardana Over a year ago

I've updated my question with backend code content :D

Harry Wardana Over a year ago

I tracked the backend again, it seems there is another form that is not looped causing the 'id_barang' loping to fail, thank you for the answer kang ,,,

Prince Mittal · Accepted Answer · 2021-12-14 07:37:23Z

0

You can stringify your array and append it in the FormData and in the backend, you can parse that data and use it accordingly. Check out the example below.

let formData = new FormData();

let data = [
       {
          id_barang : 122
       },
       {
          id_barang : 288
       },
       {
          id_barang : 383
       }
    ]
formData.append("arr", JSON.stringify(data));


for (var value of formData.values()) {
   console.log(value);
}

answered Dec 14, 2021 at 7:37

Prince Mittal

3363 silver badges16 bronze badges

Comments

Taavi Kivimaa · Accepted Answer · 2021-12-14 07:41:07Z

0

Axios has paramsSerializer option, you can set it to comma-separated arrayFormat with qs.stringify.

const paramsSerializer = (params: any) => stringify(params, { arrayFormat: 'comma' });

answered Dec 14, 2021 at 7:41

Taavi Kivimaa

2521 silver badge7 bronze badges

Comments

Jorge Peraza · Accepted Answer · 2025-10-02 05:42:36Z

A better way you can send an array could be as follows

const arr = [1,2,3,4,5];
const form = new FormData();
arr.forEach(element => {
    form.append('name_of_field[]', element)
});
const result = await axios.post("/admin/groups", form, {
    headers: { 'Content-Type': 'multipart/form-data' }
});

This approach is better because it leverages a widely accepted standard used by web forms and is natively understood by the majority of modern server-side frameworks (e.g., PHP, Express.js with body parsers, Ruby on Rails, Django).

Key reasons for superiority:

Automatic Array Parsing: The server-side framework automatically recognizes the repeated field name ending in [] and converts the incoming values directly into a native array or list data structure. This eliminates the need for manual processing.
Simplified Server Logic: Your backend code receives a ready-to-use array (e.g., [1, 2, 3, 4, 5]), which removes the burden of manual parsing (splitting the string by a delimiter) from the server.
Standard Web Practice: It aligns with the convention for submitting multiple values from HTML forms (like multiple <select> options), making the data handling more conventional and predictable.

In contrast (sending a single delimited string like "122;288;383") forces the backend to manually split that string using the semicolon (or whatever delimiter you choose), which adds an unnecessary step and complexity to the server code.

Collectives™ on Stack Overflow

post data array with formData axios

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related