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

Vite failing to recognize updates in Vue/Pug files

Displaying images dynamically in Angular using ng-repeat with URL strings

Creating a dynamic tbody element on button click with the help of javascript or jquery

Leveraging the power of angular's $asyncValidators by implementing a cache

What is the current state of Javascript in versions 3.4 and 3.5 of ANTL

There are zero assumptions to be made in Spec - Jasmine analyzing the callback function

The Angular Google Maps Directive zooms in too much after the "place_changed" event has fired

Understanding the functionality of imports within modules imported into Angular

Verifying if a dropdown option has been chosen through validation in JavaScript

Swap out a module with a different one in a node.js environment

Retrieve the ActiveTabIndex value from an Ajax TabContainer using Javascript

The StreamingTextResponse feature is malfunctioning in the live environment

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

What are the steps to create a one-way binding between multiple input fields and a master input in Vue3?

Trouble arises when attempting to parse multiple objects from a JSON file using JavaScript

Issues with external javascript link functionality

How can we showcase the data within this loop on the user interface in React JS?

Creating a unique input box using CSS and HTML

Invoke a router inside Node.js once a route has been triggered

Update the display using a button without the need to refresh the entire webpage