Home > OS >  post data array with formData axios
post data array with formData axios

Time:12-14

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

CodePudding user response:

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

CodePudding user response:

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

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

CodePudding user response:

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
  • Related