将具有数组值的 object 键转换为查询字符串

Question

I'm trying to convert my object to a query string but I have an array as the values

my object looks like this

filterChoice: { role: ["SW", "EW"] source: ["Secondary", "Tertiary"] }

I've gotten halfway with my conversion

const toQueryString = `?${Object.keys(filterChoice)
    .map(key => `${key}=${filterChoice[key].toString()}`)
    .join('&')}`

which outputs: ?source=Secondary,Tertiary&role=SW,EW but I would like this output to look like this

?source=Secondary&source=Tertiary&role=SW&role=EW

Could anyone help me out?

Answer 1

You could flatMap the Object entries:

 const query = Object.entries(filterChoice)
  .flatMap(([key, value]) => [value].flat().map(v => [key, v]))
  .map(it => it.join("="))
  .join("&");

Answer 2

You can use URLSearchParam and iterate over the Object.keys and then each of the values

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

 var filterChoice = { role: ["SW", "EW"], source: ["Secondary", "Tertiary"] } var URL = "https://example.com/"; var searchParams = new URLSearchParams(URL); Object.keys(filterChoice).forEach(key => { filterChoice[key].forEach(val => { searchParams.append(key, val); }) }) console.log( searchParams.toString() )