Delete empty params from query string JS

Question

I have this query string:

"paymentMethod=1&fullname=&persona=&companyName=&countryName=&email=&totalCameras=&camerasOwned=&cameraShares=&snapmailCount=&sessionCount=&createdAtDate=&lastLoginAtDate=&telephone=&sort=created_at%7Cdesc&limit=50&page=1"

and I am trying to delete all empty params and make this into:

"paymentMethod=1&sort=created_at%7Cdesc&limit=50&page=1"

I took this approach:

let searchParams = Object.fromEntries(new URLSearchParams(queryString))
let filteredParams = Object.fromEntries(
  Object.entries(searchParams).filter(([_, value]) => value != "")
)
console.log(new URLSearchParams(filteredParams).toString())
console.log(searchParams)

But I am not sure about this, to use new URLSearchParams twice, is it a better and right approach?

Any guidance would be thankful.

There is `skipEmptyString` option on `query-string` package. — ton1, Jul 13 '23 at 05:02

score 7 · Accepted Answer · edited Oct 16 '21 at 13:13

It's less functional, but you can create a single URLSearchParams object, then iterate over it and .delete keys which have an empty value:

const queryString = "paymentMethod=1&fullname=&persona=&companyName=&countryName=&email=&totalCameras=&camerasOwned=&cameraShares=&snapmailCount=&sessionCount=&createdAtDate=&lastLoginAtDate=&telephone=&sort=created_at%7Cdesc&limit=50&page=1"

const params = new URLSearchParams(queryString);
[...params.entries()].forEach(([key, value]) => {
  if (!value) {
    params.delete(key);
  }
});
const cleaned = String(params);
console.log(cleaned);

The native URLSearchParams.forEach, kind of like getElementsByClassName, is live, so you can't .delete inside it, otherwise the next key-value pair will be skipped - thus the spreading of the .entries iterator first to a new array.

thank you, what could be the reason for closing votes? I have no idea what is wrong with the question — Junaid Farooq, Feb 09 '21 at 18:31

score 1 · Answer 2 · edited Oct 16 '21 at 11:01

1

It's safer to use query-string package.

Define your params as an object than call the stringify method and it will take care of the undefined and empty values for you

params = {
  paymentMethod: 1,
  fullname: 'John',
  created_at: undefined,
  test: '',
};

// cleaned object will be "paymentMethod=1&fullname=John"
const cleaned = queryString.stringify(params);

edited Oct 16 '21 at 11:01

Audwin Oyong

2,247
3
15
32

answered Feb 09 '21 at 14:50

Hani Ghazi

100
2
14

When I run this code, `cleaned` includes the `test` param even though it's empty `fullname=John&paymentMethod=1&test=` – Duderino9000 Apr 27 '22 at 23:46
this is what i did in react. its very useful. dont forget to import and install queryString package let query = { limit: rowsPerPage, offset: pageNo, search: search, status: status, }; Object.keys(query).forEach(key => { if (query[key] === '' || query[key] === null || query[key] === []) { delete query[key]; } }); const queryParams = queryString.stringify(query); – Rana Faraz Feb 14 '23 at 22:10

score 1 · Answer 3 · edited Oct 16 '21 at 11:31

1

for ([key, value] of searchParams.entries()) {
  if (value == '') searchParams.delete(key)
}

edited Oct 16 '21 at 11:31

Audwin Oyong

2,247
3
15
32

answered Feb 09 '21 at 14:52

szatkus

1,292
6
14

1

This is not working correctly because iterator skips the next item when we delete an element inside iteration. @CertainPerformance 's solution seems more robust. – sedran Mar 03 '22 at 06:37

Delete empty params from query string JS

3 Answers3