How to add stringified object to end of url

Question

I am trying to take a json object such as this one:

filters = {"filters": myArray};

and append it to the end of a url using:

this.router.navigate([`/devices/${productType}/${deviceCategory}/${JSON.stringify(filters)}`]);

Anyway, so I read on other forums that using encodeURIComponent should be used so then I tried the following:

this.router.navigate([`/devices/${productType}/${deviceCategory}/${encodeURIComponent(JSON.stringify(filters))}`]);

At this point I dont get errors but, when I try to get the data from params.paramId.filters I get undefined, even if I decode or parse it with JSON.parse(decodeURIComponent(params.paramId.filters));

How can I add a stringified object to a url and then retrieve it from the params to continue using it?

Thank you in advance!

You might want to consider encoding that as a query string instead of sticking JSON in path segments. — Joseph
– Joseph, Commented Aug 15, 2019 at 19:08

NathanOliver · Accepted Answer · 2019-08-15 19:39:41Z

1

Encoding

First do this:

const source = new URLSearchParams(filters).toString();

and append this to your url:

encodeURIComponent(JSON.stringify(source));

Decoding

Do this:

var search = location.search.substring(1);
var filters = JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g,'","').replace(/=/g,'":"') + '"}');

edited Aug 15, 2019 at 19:39

NathanOliver

184k29 gold badges324 silver badges440 bronze badges

answered Aug 15, 2019 at 19:33

mrityunjoynath

958 bronze badges

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

Comments

Preacher2012 · Accepted Answer · 2019-08-16 17:37:31Z

What I ended up doing was, I imported NavigationExtras, then:

let navigationExtras: NavigationExtras = {queryParams: {"filters": JSON.stringify(this.searchValues)}};

in my function where I was trying to append the parameter to the link, and added it like this:

this.router.navigate(['/devices/${this.config.productType.toLowerCase()}/${this.deviceCategory}/${this.displayMode}'], navigationExtras);

I retrieved it like this:

this.activatedRoute.queryParams.subscribe(param => { this.finalSearchValues = param["filters"] ? {"Filters": JSON.parse(param["filters"])} : {"filters":[]}; console.log(this.finalSearchValues);});

And it seems to be working for me at the moment. Thank you for your answers guys.

Collectives™ on Stack Overflow

How to add stringified object to end of url

2 Answers 2

Encoding

Decoding

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Encoding

Decoding

Comments

Comments

Related