Submit a data array using formData through axios

Question

Submit a data array using formData through axios

I am planning to send array data using formData. The backend is set up to accept the data array separated by a dash ; For example, if I were to use Postman and input the form-data like this:

id_barang : 122;288;383 (sending 3 values of id with dashes ;)

Would my formData implementation look something 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);


     //If there are any mistakes in my approach, please do correct me

This is how my backend processes the data:

id_barang_data := strings.Split(r.FormValue("id_barang"), ";") // This will result in: 1002;983;756
    
for i, _ := range id_barang_data { // Looping through each value one by one
        rSegAnalisaMethodDetail := models.SegAnalisaMethodDetail{}
        id_barang, err := strconv.Atoi(id_barang_data[i])
        if err != nil {
            responses.ERROR(w, http.StatusBadGateway, err)
        }

javascript vue.js axios multipartform-data

Answer 1

Answer №1

Your code is correct, but you may have missed adding a way to send your request with axios. When using FormData with axios, make sure to include

'Content-Type': 'multipart/form-data'

. However, if you are not including any files in the FormData, it is not necessary to use it.

Below is the complete 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

Answer 2

Your code is correct, but you may have missed adding a way to send your request with axios. When using FormData with axios, make sure to include

'Content-Type': 'multipart/form-data'

. However, if you are not including any files in the FormData, it is not necessary to use it.

Below is the complete 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

Answer 3

Answer №2

One way to handle arrays in a FormData object is by converting the array to a string using JSON.stringify(), appending it to the FormData, and then parsing it on the backend for usage. Here's an example to illustrate this:

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

Answer 4

One way to handle arrays in a FormData object is by converting the array to a string using JSON.stringify(), appending it to the FormData, and then parsing it on the backend for usage. Here's an example to illustrate this:

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

Answer 5

Answer №3

Utilize Axios' paramsSerializer feature by configuring it to use a comma-separated arrayFormat with the qs.stringify method.

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

Answer 6

Utilize Axios' paramsSerializer feature by configuring it to use a comma-separated arrayFormat with the qs.stringify method.

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

Submit a data array using formData through axios

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to implement request-specific global variables for individual websocket connections in a Node.js application, similar to using res.locals for

Obtaining the current value with each keystroke

Ways to categorize items using JQuery based on their hierarchical structure

Secure your browsing experience with AngularJS authentication prompt

"Combining background images with javascript can result in displaying visual elements

How can I dynamically redirect based on the selected radio button value in a React application?

What strategies can I employ to speed up the slow build times in next.js?

Dialogue Inventory System

Can a string or javascript object be uploaded without being saved in a file? - IPFS

Associating information with a dropdown menu

Obtain a report using a variety of different conditions

Integrate the perfect-scrollbar jQuery plugin into RequireJS

Encountering difficulties with image processing on a web page

Capture the current state of a page in Next.js

Retrieving information from a separate JavaScript file

Is there a way to create an internal link to another HTML templating engine page within Express.js?

Submit your document using the connect-form tool

:Incorporating active hyperlinks through javascript

Using ReactJS and react-router to exclude the navigation menu on the login page

Dynamic class name changes in Angular.js based on JSON object