0

I realize retrieving search params from the URL is a commonly asked Question but I am running into an issue with using URLSearchParams(window.location.search) because I believe it is searching for a ? and my url contains & as separators between values.

my url will look something like this

http://localhost:8080/monitor/patientName=Courtney+Patient&pageSize=50

My Goal is to pull out the searchParams in the url and add them to the state of my component on load. So I am reading the whole URL and splitting it at the / this is giving me an array that looks something like this:

const queryString = window.location.pathname.split("/")[2]
const queries = queryString.split("&")

where queries returns: 
["patientName=Courtney+Patient","pageSize=50"]

I am hoping to loop over my default state and if queries contains lets say patientName the value will be replaced with the value held in the URL.

But I am not sure how to access the keys with varying lengths and compare them to the defaultStates keys. I am wondering if theres a way to get the keys inside the URL without using .split("") over and over?

CourtneyJ
  • 458
  • 6
  • 19

1 Answers1

1

I think a valid query string requires a ? before the first parameter name.

I think it might be best to avoid using + as it might be a bit confusing.

So, I think your URL should look something like this: http://localhost:8080/monitor/?patientName=Courtney&pageSize=50

Now window.location.search will give you patientName=Courtney&pageSize=50

In order to get the values of the patientName and pageSize parameters you can use this code:

const params = new URLSearchParams(window.location.search);

for (const [key, value] of params){
  console.log(key, ': ', value);
}

This is demonstrated in the snippet below where I have substituted window.location.search for 'patientName=Courtney&pageSize=50' because the window object is not available to me in the context of the snippet:

const params = new URLSearchParams('patientName=Courtney&pageSize=50');

for (const [key, value] of params){
  console.log(key, ': ', value);
}

I hope this helps.

user3425506
  • 1,285
  • 1
  • 16
  • 26
  • Thanks this is helpful, Im not sure why my query string doesnt have the ? also the + is being added when its generated. Lots of things to figure out. But this helped with one issue. So thanks! – CourtneyJ Jun 29 '22 at 22:16
  • Glad it was helpful. Is the URL not something you have control over? – user3425506 Jun 29 '22 at 22:23