axios post array data

Question

I'm trying to send post request to a server I don't have much control on it. The only thing I know is I can obtain the correct response if I post the following data in Postman

x-www-form-urlencoded radio button checked

Entered the following 2 array data:
    product_id_list[]          pid1234
    product_id_list[]          pid1235

Header - Content-Type: application/x-www-form-urlencoded

Method: Post

But when I tried to do it through axios, it doesn't seems the correct params data can get through. I've tried

axios.post('https://test.com/api/get_product,
    querystring.stringify({
      'product_id_list': ['pid1234', 'pid1235']
    }))
.
.
.
axios.post('https://test.com/api/get_product,
    querystring.stringify({
      'product_id_list[]': 'pid1234',
      'product_id_list[]': 'pid1235'
    }))
.
.
.

Anyone got an idea on how to translate this type of array data in axios?

Answer 1

You can use the native axios to create a request. You can pass your payload with the data key.

 import axios from 'axios'; let payload = { product_id_list: ['pid1234', 'pid1235'] }; axios({ url: 'https://test.com/api/get_product', method: 'post', data: payload }) .then(function (response) { // your action after success console.log(response); }) .catch(function (error) { // your action on error success console.log(error); }); 

You can try running your axios code from your browser here .

Answer 2

you can send your post request with 'Content-Type': 'application/json' header (if server can handle it)

const productList = [1, 2, 3, 4]

const data = JSON.stringify({product_list: productList})
const config = {
    headers: {'Content-Type': 'application/json'}
}

return axios.post('api/url', data, config)

Answer 3

This issue popped up for me as well, and I solved it with new FormData() .

Having an array:

const product_id_list = ['pid1234', 'pid1235']

const bodyFormData = new FormData();

product_id_list.forEach((item) => {
    bodyFormData.append('product_id_list[]', item);
});

axios.post('https://test.com/api/get_product', bodyFormData)

Doing it this way sent it the request as application/x-www-form-urlencoded, and the proper data in the body.

Answer 4

You can try the following:

    var payload = {
            product_id_list: [
                'pid1234',
                'pid1235'
              ]
    };

    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    payloaxios.post('https://test.com/api/get_product', payload)
      .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Also, you should take a good look to axios documentation .

Answer 5

I think you are missing a single quote symbol after the url:

axios.post('https://test.com/api/get_product', {
  product_id_list: ['pid1234', 'pid1235']
})

Answer 6

        $.ajax({
            type: "POST",
            url: "proceso.php",
            data: {'array': array,'array2': array2},     
            success: function(data){
                console.log(data);
            }
        });

Answer 7

You can also send an Array of object with FormData in axios -

let full_name = this.state.full_name;
let phone_no = this.state.phone_no;
let carts = [
       { product_id: 1, quantity: 10, ...}, 
       { product_id: 2, quantity: 5, ...}, 
     ]
let orderFormData = new FormData();
orderFormData.append('full_name', full_name);
orderFormData.append('phone_no', phone_no);

//Just stringify carts array
orderFormData.append('carts', JSON.stringify(carts));

const headers = {
  'Content-Type' : 'application/json',
  'Accept' : 'application/json',
};

axios.post(url, orderFormData, {headers: headers})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error)
  })

And from Backend you can get it from your request. if you are using Laravel then you can get cart data with -

json_decode($request->carts);

this will return you exact array what you send with axios.