Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Question

Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Desired query string format:

http://fqdn/page?categoryID=1&categoryID=2

Axios get request function:

requestCategories () {
  return axios.get(globalConfig.CATS_URL, {
    params: {
      ...(this.category ? { categoryId: this.category } : {})
    }
  })
    .then((resp) => {
      // console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
}

The function works correctly with single values for parameters, but encounters an issue when trying to pass multiple values. Attempted to use an array:

...(this.category ? { categoryId: [1, 2] } : {})

However, the resulting query string is:

http://fqdn/page?categoryID[]=1&categoryID[]=2

Unfortunately, this method does not work as expected. Referenced a related issue on Stack Overflow at: Passing an object with a parameter with multiple values as a query string in a GET using axios

Unable to determine the solution from the provided information.

javascript vue.js axios

Answer 1

Answer №1

If you want to customize the serialization of parameters in an Axios request, you can leverage the paramsSerializer option.

An alternative approach is to use the URLSearchParams class which serializes array data as expected:

const searchParams = new URLSearchParams();
searchParams.append('foo', 1);
searchParams.append('foo', 2);
console.log(searchParams.toString()); // foo=1&foo=2

You can incorporate this class within the paramsSerializer function like so:

// my-axios.js
export default axios.create({
  paramsSerializer(params) {
    const searchParams = new URLSearchParams();
    for (const key of Object.keys(params)) {
      const param = params[key];
      if (Array.isArray(param)) {
        for (const p of param) {
          searchParams.append(key, p);
        }
      } else {
        searchParams.append(key, param);
      }
    }
    return searchParams.toString();
  }
});

// Foo.vue
import axios from './my-axios.js';

export default {
  methods: {
    async send() {
      const { data } = await axios({
        url: '//httpbin.org/get',
        params: {
          categoryId: [1, 2, 3]
        }
      });

      // ...
    }
  }
}

Check out the live demo for a hands-on example!

Answer 2

If you want to customize the serialization of parameters in an Axios request, you can leverage the paramsSerializer option.

An alternative approach is to use the URLSearchParams class which serializes array data as expected:

const searchParams = new URLSearchParams();
searchParams.append('foo', 1);
searchParams.append('foo', 2);
console.log(searchParams.toString()); // foo=1&foo=2

You can incorporate this class within the paramsSerializer function like so:

// my-axios.js
export default axios.create({
  paramsSerializer(params) {
    const searchParams = new URLSearchParams();
    for (const key of Object.keys(params)) {
      const param = params[key];
      if (Array.isArray(param)) {
        for (const p of param) {
          searchParams.append(key, p);
        }
      } else {
        searchParams.append(key, param);
      }
    }
    return searchParams.toString();
  }
});

// Foo.vue
import axios from './my-axios.js';

export default {
  methods: {
    async send() {
      const { data } = await axios({
        url: '//httpbin.org/get',
        params: {
          categoryId: [1, 2, 3]
        }
      });

      // ...
    }
  }
}

Check out the live demo for a hands-on example!

Answer 3

Answer №2

It seems like the issue you are facing is not related to axios, but rather depends on whether your backend service can interpret query parameters in a specific format (which may be framework dependent). It appears that the problem arises when queryParams are sent in the following fashion:

?categoryID[]=1&categoryID[]=2

The backend service expects the queryParams to be formatted like this:

?categoryID = 1,2

To resolve this issue, you can transform the array into a string before passing it as params in axios. Simply update the following section of your code and the problem should be fixed.

...(this.category ? { categoryId: this.category.join(',') } : {})

For more information, refer to the discussion in the following thread:

How to pass an array within a query string?

Answer 4

It seems like the issue you are facing is not related to axios, but rather depends on whether your backend service can interpret query parameters in a specific format (which may be framework dependent). It appears that the problem arises when queryParams are sent in the following fashion:

?categoryID[]=1&categoryID[]=2

The backend service expects the queryParams to be formatted like this:

?categoryID = 1,2

To resolve this issue, you can transform the array into a string before passing it as params in axios. Simply update the following section of your code and the problem should be fixed.

...(this.category ? { categoryId: this.category.join(',') } : {})

For more information, refer to the discussion in the following thread:

How to pass an array within a query string?

Answer 5

Answer №3

If you're seeking a way to generate comma-separated values in your URL parameters, like this:

?size=4&sort=modifiedOn,name

Here's how you can do it:

const http = axios.create({

  paramsSerializer: params => new URLSearchParams(params).toString()

})

http.get('/users', {
  params: {
    size: 4,
    sort: ['modifiedOn', 'name']
  }
})

This will give you a serialized query string as follows:

?size=4&sort=modifiedOn%2Cname

Answer 6

If you're seeking a way to generate comma-separated values in your URL parameters, like this:

?size=4&sort=modifiedOn,name

Here's how you can do it:

const http = axios.create({

  paramsSerializer: params => new URLSearchParams(params).toString()

})

http.get('/users', {
  params: {
    size: 4,
    sort: ['modifiedOn', 'name']
  }
})

This will give you a serialized query string as follows:

?size=4&sort=modifiedOn%2Cname

Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Answer №1

Answer №2

Answer №3

Similar questions

Error: npx is unable to locate the module named 'webpack'

What is the best way to transform this PHP Object into an array?

Looking to include an if/then statement for an item that has been generated within a div?

What could be the reason behind my Javascript code returning "object object"?

Issues with invoking C# event through ajax communication

Is it advisable to use Angular $resource JSON Callback if it's not functioning correctly?

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

What is the best way to transform a synchronous function call into an observable?

Keeping an object in a multidimensional array based on its ID in Angular 4/Ionic 3 without removing it

What is the best way to retrieve the document DOM object within an EJS template?

Firefox not rendering responsive YouTube embed properly

Error in Express Session: Property 'signin' is not found in type 'Session & Partial<SessionData>'. Code: 2339

Update the designated dropdown menu using its identification number

Vue .filter doesn't work with reactive data sources

Troubleshooting NPM installation failures with SQLite build

`Inability to remove item from array in Vue.js`

Utilizing an Apollo query that relies on the outcome of a previous query

javascript for each and every textarea

How can Vue 3 Composition API facilitate the sharing of reactive data among disparate components?

Building and deploying Nuxt 3 applications in different environments