0

I am making a get request with additional params options, since I am using that request on a filter, so the params are filters for what to get back:

const res = await axios.get("http://localhots:3000/getsomedata", {
  params: {
    firstFilter: someObject,
    secondFilter: [someOtherObject, someOtherObject]
  }
});

The request goes through just fine, on the other end, when I console.log(req.query); I see the following:

{
  firstFilter: 'someObject',
  'secondFilter[]': ['{someOtherObject}', '{someOtherObject}'],
}

If I do req.query.firstFilter that works just fine, but req.query.secondFilter does not work and in order for me to get the data, I have to do it with req.query["secondFilter[]"], is there a way to avoid this and be able to get my array of data with req.query.secondFilter?

My workaround for now is to do:

const filter = {
  firstFilter: req.query.firstFilter,
  secondFilter: req.query["secondFilter[]"]
}

And it works of course, but I don't like it, I am for sure missing something.

Darkbound
  • 3,026
  • 7
  • 34
  • 72

2 Answers2

0

Some tools for parsing query strings expect arrays of data to be encoded as array_name=1&array_name=2.

This could be a problem if you have one or more items because it might be an array or might be a string.

To avoid that problem PHP required arrays of data to be encoded as array_name[]=1&array_name[]=2 and would discard all but the last item if you left the [] out (so you'd always get a string).

A lot of client libraries that generated data for submission over HTTP decided to do so in a way that was compatible with PHP (largely because PHP was and is very common).

So you need to either:

  • Change the backend to be able to parse PHP style
  • Change your call to axios so it doesn't generate PHP style

Backend

The specifics depend what backend you are using, but it looks like you might be using Express.js.

See the settings.

You can turn on Extended (PHP-style) query parsing by setting it to "extended" (although that is the default)

const app = express()
app.set("query parser", "extended");

Frontend

The axios documentation says:

  // `paramsSerializer` is an optional function in charge of serializing `params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

So you can override that

const res = await axios.get("http://localhots:3000/getsomedata", {
  params: {
    firstFilter: someObject,
    secondFilter: [someOtherObject, someOtherObject]
  },
  paramsSerializer: (params) => Qs.stringify(params, {arrayFormat: 'repeat'})
});

My example requires the qs module

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
-1

This has to do with params not being serialized correctly for HTTP GET method. Remember that GET has no "body" params similar to POST, it is a text URL.

For more information I refer to this answer, which provides more detailed info with code snippets.

Arek Kukuła
  • 36
  • 1