Append to Query String JavaScript

Question

When I'm trying to append an id to the end of my query string, the JS adds unnecessary ampersand and '=' sign to the query string.

I'm trying to go for something like this:

http://sample_site/report/file/list?f%5B%5D=1111

but I get this when I view the result in the console:

http://sample_site/report/file/list?f%5B%5D=&f=1111

Here is my JS function that builds a URL object:

buildTileFilter(){
 let url = new URL('http://sample_site/report/file/list?f%5B%5D');
 let query_string = url.search;
 let search_params = new URLSearchParams(query_string);
 search_params.set('f', 1111);
 url.search = search_params.toString();
 let new_url = url.toString();
 return new_url;
 }

Answer 1

The "%5B%5D" part is being treated as part of the parameter name. You have to add it to the param name that you're setting to get the result you want. That's the encoded value for the string "[]", so to get your result, the code should be:

buildTileFilter(){
 let url = new URL('http://sample_site/report/file/list?f%5B%5D');
 let query_string = url.search;
 let search_params = new URLSearchParams(query_string);
 search_params.set('f[]', 1111);
 url.search = search_params.toString();
 let new_url = url.toString();
 return new_url;
 }

• User1990: Thanks @JasonR ! I appreciate the quick response! I voted for this answer but since I'm new it's not going to display publicly.
• JasonR: @User1990 No problem!