CODEWITHSUNDEEP
javascriptaxios
charliefortune
charliefortune

Reputation: 3190

How can I force axios to send empty array?

I'm sending an array of integers with axios from a vue.js application, method PATCH.

If there are values, to data is passed as expected.

But if there are none (e.g. all items removed from the multiselect), then the payload is empty. I need it to be sent so the items can be removed from the database, a pretty normal use case.

My update method is as follows:

 update({ commit, dispatch }, data) {
    return new Promise((resolve, reject) => {
      const params = {};
      params[data.name] = data.value;
      console.log(params)
      axios({ url: '/api/' + module + '/' + data.id, params, method: 'PATCH' })
        .then(response => {
          //Replace the full object in the store with the one we get back from the patch operation
          commit('update', response.data.data);
          dispatch('postUpdate', data)
          resolve(response)
        })
        .catch(err => {
          reject(err)
        })
    })

My console.log confirms that the params array is the way I expect

Object { data_items: [] }

But the network request shows that it's being removed and nothing posted.

I can also confirm that when I make a select any values, the request works as expected and sends to the server to be persisted.

For example

Request for populated selection http:///api/processes/16?data_items[]=2

Request for emptied selection - no query paramaters http://example.com/api/processes/16

How can I force axios to send the empty array?

Upvotes: 5

Views: 3652

Answers (1)

hilipati
hilipati

Reputation: 531

Using querystring's stringify as serializer and adding an empty string to the empty list works for me.

e.g.

const queryObject = {myList: myList.length > 0 ? myList : ['']}


return axios.get(url, {params: queryObject, paramsSerializer: querystring.stringify}).then(...)

Then the url becomes http://example.com?myList= which my backend interprets as receiving an empty list for myList query param.

Upvotes: 2

Related Questions