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;
    }

JasonR · Accepted Answer · 2019-03-15 21:24:12Z

3

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;
    }

answered Mar 15, 2019 at 21:24

JasonR

4013 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User1990 Over a year ago

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 Over a year ago

@User1990 No problem!

Collectives™ on Stack Overflow

Append to Query String JavaScript

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related