How to log the result of "new URLSearchParams()"?

Question

I am looking at this example on the google chrome docs.

I am trying to console.log the variable params

let url = new URL('https://example.com?foo=1&bar=2'); // or construct from window.location

let params = new URLSearchParams(url.search.slice(1));

However, this is all I get:

getAll: Object {  }, has: Object {  }, set: Object {  }, sort: Object {  }, 
toString: Object {  }, entries: Object {  }, forEach: Object {  }, 
keys: Object {  }, values: Object {  } }

Like in the example, you can loop through the params variable and console.log each parameter, but not the variable params. Why can't it be logged and seen as an object?

Answer 1

You can use fromEntries

let url = new URL('https://example.com?foo=1&bar=2'); // or construct from window.location
let params = new URLSearchParams(url.search.slice(1));
console.log(Object.fromEntries(params)) // outputs {foo: '1', bar: '2'}

Answer 2

The way I got this to work was:

1. Go to the following url: https://example.com/?foo=1&bar=2
2. Open dev tools in Chrome (or your favorite browser) and drop the following code into the console:

let url = window.location.search;

let searchParams = new URLSearchParams(url);

let foo = searchParams.get('foo');
let bar = searchParams.get('bar');

console.log(foo, bar)

Output should be 1 2