Axios conditional parameters

Question

axios.get(globalConfig.FAKE_API, {
    params: {
        phone: this.phone,
        mail: this.mail
    },
})
.then((resp) => {
    this.req = resp.data
 })
.catch((err) => {
     console.log(err)
 })

Is there any way I can make conditional parameters when doing GET / POST requests with Axios? For example, if my mail parameter is empty, i won't send an empty parameter, like: someurl.com?phone=12312&mail=

Take a look at it. https://stackoverflow.com/a/38340730/4248342 — Hardik Modha, Sep 13 '18 at 11:46
Possible duplicate of [Remove blank attributes from an Object in Javascript](https://stackoverflow.com/questions/286141/remove-blank-attributes-from-an-object-in-javascript) — Hardik Modha, Sep 13 '18 at 11:47

Raghav Garg · Accepted Answer · 2018-09-13T11:52:42.310

30

Either you can maintain a variable of params before making a request and only add key if it has data like:

const params = {}
if (this.mail) { params.mail = this.mail }

or you can do like below, we write normal js code between ...() the parenthesis. We are adding a ternary condition.

axios.get(globalConfig.FAKE_API, {
  params: {
    phone: this.phone,
    ...(this.mail ? { mail: this.mail } : {})
  },
})

edited Sep 13 '18 at 11:52

answered Sep 13 '18 at 11:39

Raghav Garg

3,601
2
23
32

What does `...` means? Also can i put condition inline? like `mail !== undefined ? true : false` – Alexander Kim Sep 13 '18 at 11:41
1

this is the spread operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax. No, you cannot do this `mail !== undefined ? true : false` – Raghav Garg Sep 13 '18 at 11:42
Used `...({ mail: this.mail })`, but my get request is still appending this `http://fake.com/users?phone=123&mail=` – Alexander Kim Sep 13 '18 at 11:49
Are you sure the object spread operator does what you expect? I just tested it in the Firefox console and using the object spread operator did not omit empty/null values – Subsurf Sep 13 '18 at 11:50
oh, my bad, forgot to add the condition, updated the answer.! – Raghav Garg Sep 13 '18 at 11:50
@RaghavGarg, also why do you put `mail` as object? – Alexander Kim Sep 13 '18 at 11:53
1

spread operator take all the keys from source object and add those keys to target object, since we wanted the key `mail` on our param object that's why. Let me know if it doesn't make any sense.! – Raghav Garg Sep 13 '18 at 12:06

Subsurf · Answer 2 · 2018-09-14T12:10:17.977

1

Reghav Garg's idea looks neat at first glance, but with more than one optional parameter, I'm afraid it will get messy.

You could simply use one of the common utility libraries like underscore or lodash and utilize their filter function:

const allParams = {
    mail: this.mail,
    phone: this.phone,
    // ...
};
axios.get(globalConfig.FAKE_API, {
   // 'Pick' takes only those elements from the object
   // for which the callback function returns true
   //
   // Double negation will convert any value to its boolean value,
   // so null becomes false etc.
   params: _.pick(allParams, (value, key) => { return !!value; })
})

edited Sep 14 '18 at 12:10

answered Sep 13 '18 at 11:58

Subsurf

1,256
1
17
28

well, you are right. I would not suggest my answer for bulk property checks. – Raghav Garg Sep 13 '18 at 12:08
What's for is `(value, key)`? – Alexander Kim Sep 13 '18 at 13:55
1

It's the arrow function syntax, kind of like a shorthand for `function(value, key) { ... }`, but with sideeffects like no own `this` object. Its great to declare callbacks: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Subsurf Sep 13 '18 at 14:29
What do i put as value, key in my case? – Alexander Kim Sep 13 '18 at 15:34
You don't have to put anything there. `(value, key) => { return !!value; }` defines a callback function. That callback function will be called by `_.filter` for each of the elements in `allParams`. For each call, `value` will be the current value (i. e. the content of `this.mail`) and `key` will be the current key (i. e. 'mail'). The function then uses the value to check whether the current element is empty and should be included in the returned object or not. – Subsurf Sep 13 '18 at 20:39
i'm getting `users?0=1&1=0` values, when using your solution. – Alexander Kim Sep 14 '18 at 02:29
My bad, `_.filter` can only be used with collections (= arrays) and always returns an array. `_.pick` is the correct function: https://lodash.com/docs/4.17.10#pick – Subsurf Sep 14 '18 at 12:11

Axios conditional parameters

2 Answers2

Linked