encodeURI(JSON.stringify()) showing %255B in URL

Question

I am trying to pass along a queryParam in Angular that consists of an array of objects as such fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}] . In the URL queryParam I am receiving the following: %255B when using encodeURI(JSON.stringify(this.fooArray))

I have tried using encodeURI(JSON.stringify()) to encode the array into the queryParam and JSON.parse(decodeURIComponent()) to retrieve the param

fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]

fooParam: encodeURI(JSON.stringify(this.fooArray))

JSON.parse(decodeURIComponent(params["fooParam"]))

Answer 1

You're double-encoding the URL. This:

encodeURI(JSON.stringify([{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]))

results in

"%5B%7B%22foo%22:false%7D,%7B%22foo%22:false%7D%5D"

If you call encodeURI on it again, you get

"%255B%257B%2522foo%2522:false%257D,%257B%2522foo%2522:false%257D%255D"

...because % is encoded as %25 .

Two notes:

1. You should encode it only once. Perhaps you're passing the string to something that will already URI-encode it for you? If so, don't use encodeURI .

2. Usually, you want encodeURIComponent , not encodeURI (because usually you're encoding just a component of hte URI, not the entire thing).

Answer 2

I was running into this problem, and what I discovered was that somewhere along the chain of my code, I was running .toString() , which runs a encodeURI on my string/url.

I was essentially double encoding my search params without knowing it. If you're running .toString() on an instance of URL or URLSearchParams class, then you don't need to manually run encodeURI or encodeURIComponent

Testing For Double Encoding

A quick way to learn if you're double encoding a string is to setup a quick example test run in your javascript developer tools. Visualizing this help me a lot:

const searchParams1 = '?status=open&created_by=bobby&date';
const url1 = "http://example.com/" + searchParams1;
const searchParamsString1 = new URL(exampl1).toString() // NOTE: `toString()` runs encode on the string for you!

const searchParams2 = '?status=open&date_filter={"by":"created","qualifier":"between","value":["2022/04/01","2022/04/02"]}';
const example2 = "http://example.com/" + searchParams2;
const searchParamsString2 = new URL(example2).toString();

// encoded 1x
searchParamsString2 ===
  "http://example.com/?status=open&date_filter={%22by%22:%22created%22,%22qualifier%22:%22between%22,%22value%22:[%222022/04/01%22,%222022/04/02%22]}";

// encoded 2x (visual)
const example2DoubleEncoded = encodeURI(
  "http://example.com/?status=open&date_filter={%22by%22:%22created%22,%22qualifier%22:%22between%22,%22value%22:[%222022/04/01%22,%222022/04/02%22]}"
);
example2DoubleEncoded ==="http://example.com/?status=open&date_filter=%7B%2522by%2522:%2522created%2522,%2522qualifier%2522:%2522between%2522,%2522value%2522:%5B%25222022/04/01%2522,%25222022/04/02%2522%5D%7D";