Axios: Get parameter array with key value

Created on 20 Sep 2017  ·  3Comments  ·  Source: axios/axios

Hi,

I've searching, but can't find the way to do it. Basically i want to send GET request with array parameter like this

GET /comments?filter[post]=3&filter[author]=12

I've tried this

params: {
  filter: {post: 3, author: 12}
}

But still no luck :(

Any hint?

Thanks

Most helpful comment

Hi @ghprod, first of all I want to make clear that I'm not a contributor to this library nor I use it, but I was passing by and I saw this issue and decided to investigate the code a bit.

Axios does not support that kind of encoding by default but it allows you to provide a custom serializer. You can accomplish this very easily with the following code:

// Axios include here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: customSerializerFunc
});

To make it simpler, I googled a bit for querystring serializer libraries and found qs which has support for browsers and nodejs. You can use it as a serializer this way:

// Include axios and qs here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: qs.stringify  // If this doesnt work, append .bind(qs) to the end of this line.
});

Maybe you'll see this: filter%5Bpost%5D=3 instead of filter[post]=3, that's because URL encoding is enabled. You can disable it this way:

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: function(params) {
        return qs.stringify(params, { encode: false });
    }
});

Let me know if it worked.
Regards.

All 3 comments

Hi @ghprod, first of all I want to make clear that I'm not a contributor to this library nor I use it, but I was passing by and I saw this issue and decided to investigate the code a bit.

Axios does not support that kind of encoding by default but it allows you to provide a custom serializer. You can accomplish this very easily with the following code:

// Axios include here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: customSerializerFunc
});

To make it simpler, I googled a bit for querystring serializer libraries and found qs which has support for browsers and nodejs. You can use it as a serializer this way:

// Include axios and qs here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: qs.stringify  // If this doesnt work, append .bind(qs) to the end of this line.
});

Maybe you'll see this: filter%5Bpost%5D=3 instead of filter[post]=3, that's because URL encoding is enabled. You can disable it this way:

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: function(params) {
        return qs.stringify(params, { encode: false });
    }
});

Let me know if it worked.
Regards.

It's works .. :+1:

Thanks a lot @ngonzalvez

Have a great day :)

hi, i need help regarding axios -- how do i get a value from input and put it as a value on a parameter for axios.get ; say for a search function that i am building - part of the url is a query param.

here's the code
axios
.get('http://localhost:8080/customer/search?hint=da')

where hint = "searchText"

please help.

thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

helmus picture helmus  ·  3Comments

Baoyx007 picture Baoyx007  ·  3Comments

ghost picture ghost  ·  3Comments

varmeh picture varmeh  ·  3Comments

reggi picture reggi  ·  3Comments