Angular2 UrlSearchParams how to create url query with multiple values for same param with brackets

Question

How to properly use UrlSearchParams to create url a structure like the following:

example.org?tag[]=one&tag[]=two&tag[]=other

When I use Url Params as presented below:

let params = new URLSearchParams();
params.append('tag', 'one');
params.append('tag', 'two');
params.append('tag', 'other');

The Url looks like this:

example.org?tag=one&tag=two&tag=other

This approach causes some problems on web servers because they treat that query string the same way as ?tag=one. The server gets only the first value if there are no brackets present.

Nenad Nikolic · Accepted Answer · 2016-11-22 15:30:11Z

9

I think you are looking for this:

let params = new URLSearchParams();
params.append('tag[]', 'one');
params.append('tag[]', 'two');
params.append('tag[]', 'other');

answered Nov 22, 2016 at 15:30

Nenad Nikolic

1184 bronze badges

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

1 Comment

Moritz Over a year ago

This does no longer work, since the [] are encoded now.

Poul Kruijt · Accepted Answer · 2016-11-22 15:14:20Z

2

I guess you can do something like this, but I haven't tested it:

let params = new URLSearchParams();
params.append('tag[0]', 'one');
params.append('tag[1]', 'two');
params.append('tag[2]', 'other');

answered Nov 22, 2016 at 15:14

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

1 Comment

Narendra Vyas Over a year ago

Hi how can we pass key in tag dynamically. I mean as a variable. eg: 'tag[key]'. I want to use it a for loop.

Collectives™ on Stack Overflow

Angular2 UrlSearchParams how to create url query with multiple values for same param with brackets

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related