How to remove empty query params using URLSearchParams?

Question

I was working with query params, and got introduced to URLSearchParams. I am using it to form this kind of object to query,

const x = {
  a: 'hello World'
  b: 23
  c: ''
}
let params = new URLSearchParams(x);
console.log(params.toString()) // a=hello+World&b=23&c=

Here, I dont want to have that c=, as it's ugly, and my API doesn't need that.

So, I want this result a=hello+World&b=23 (without empty query string) But, I couldn't find anything on the MDN Web Docs.

How am I supposed to do that?

Doing the following doesn't work, as it seems to directly mutate the params which affects the forEach:

const x = {
  a: 'hello World',
  b: '',
  c: ''
};

let params = new URLSearchParams(x);
params.forEach((value, key) => { // never reaches `c`
  console.log(key, ' => ', value)
  if (value == '')
    params.delete(key);
});
console.log(params.toString());

score 20 · Accepted Answer · edited Oct 16 '21 at 12:18

20

You can iterate over the key-value pair and delete the keys with null values:

const x = {
  a: 'hello World',
  b: '',
  c: ''
};

let params = new URLSearchParams(x);
let keysForDel = [];
params.forEach((value, key) => {
  if (value == '') {
    keysForDel.push(key);
  }
});

keysForDel.forEach(key => {
  params.delete(key);
});

console.log(params.toString());

edited Oct 16 '21 at 12:18

Audwin Oyong

2,247
3
15
32

answered Jul 20 '20 at 06:03

Rahul Bhobe

4,165
4
17
32

3

just be aware this will remove `0` values as well – Matt Jul 20 '20 at 06:05
@Matt changing the condition to `v == ''` will do, Right ?? – ezio4df Jul 20 '20 at 06:06
1

I changed as per that – Rahul Bhobe Jul 20 '20 at 06:08
@RahulBhobe got another little problem will u help ?? – ezio4df Jul 20 '20 at 06:28
sure - what's up? – Rahul Bhobe Jul 20 '20 at 06:28
i originally had taken care of it. then it worked and i was surprised – Rahul Bhobe Jul 20 '20 at 06:30
@RahulBhobe you awesome! – ezio4df Jul 20 '20 at 06:35
4

I can't believe this is not part of the URLSearchParams API. I can't believe this is the canonical solution. I just can't. – martriay Jun 08 '21 at 01:27

score 6 · Answer 2 · answered Dec 16 '20 at 10:47

6

A clean way I do it myself is as follows (using lodash):

import omitBy from 'lodash/omitBy';
import isEmpty from 'lodash/isEmpty';

const x = {
  a: 'hello World'
  b: 23
  c: ''
}

const params = new URLSearchParams(omitBy(x, isEmpty));

// mixing other sets
const params = new URLSearchParams({
  otherParam: 'foo', 
  ...omitBy(x, isEmpty)
});

answered Dec 16 '20 at 10:47

r712m

299
3
7

1

This will remove 0 values as well. – Tonni Jan 11 '23 at 04:02
I would go with `isNil` over `isEmpty` for the reason that @Tonni has mentioned above. – 76484 May 24 '23 at 19:47

score 4 · Answer 3 · edited Oct 16 '21 at 13:07

4

Simple way to delete useless params from query in JavaScript ES5+:

for (let param in query) { /* You can get copy by spreading {...query} */
  if (query[param] === undefined /* In case of undefined assignment */
    || query[param] === null 
    || query[param] === ""
  ) {    
    delete query[param];
  }
}
return new URLSearchParams(query).toString();

edited Oct 16 '21 at 13:07

Audwin Oyong

2,247
3
15
32

answered Nov 04 '20 at 07:10

abdelgrib

843
7
11

score 1 · Answer 4 · answered Apr 22 '22 at 12:03

1

In case your are working with the query as a string you can also filter it with a regex :

const query = "a=hello+World&b=23&c=&d=12&e="

query.replace(/\w+=&/g, '').replace(/&\w+=$/, '')
// "a=hello+World&b=23&d=12"

answered Apr 22 '22 at 12:03

Lucas David

102
9

score 1 · Answer 5 · answered Jun 10 '23 at 05:13

Here is yet another clean way you can do this:

const x = {
  a: 'hello World',
  b: 23,
  c: ''
};

// Create a new object with only non-empty properties
const y = Object.fromEntries(
  Object.entries(x).filter(([key, value]) => value !== '')
);

// Then use this new object to create URLSearchParams
let params = new URLSearchParams(y);

console.log(params.toString());  // a=hello+World&b=23

Object.entries(x) gives us an array of [key, value] pairs for the x object.
The filter function is used to remove entries where the value is an empty string ('').
Object.fromEntries then takes this filtered array and turns it back into an object.
This resulting object is passed to URLSearchParams, which will only have the entries with non-empty values.

cfx · Answer 6 · 2023-06-13T05:56:55.053

Here's a one-liner that preserves any 0 values:

const x = {
  a: 'hello World',
  b: '',
  c: '',
  d: 0
};

const params = new URLSearchParams(new URLSearchParams(x).toString().replace(/(?:\&|^)[^\&]*?\=(?=\&|$)/g, ''));

console.log(params.toString());

If you want something a bit easier to follow:

const x = {
  a: 'hello World',
  b: '',
  c: '',
  d: 0
};

const params = new URLSearchParams(new URLSearchParams(x).toString().split('&').filter(el => el.split('=').slice(-1) !== '').join('&')).toString();

console.log(params.toString());

How to remove empty query params using URLSearchParams?

6 Answers6