convert object key with array values to query string

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?

Does this make sense? Do you send that query to a server driven application or middleware? If so you can only get one role or source parameter from the query. — Marcel
– Marcel, Commented May 4, 2020 at 21:55
this is only half the query for the API, there are other variables that aren't relevant to the question — invrt
– invrt, Commented May 4, 2020 at 21:57
@marcel nope, that's how you pass arrays through queries (if you have to) — Jonas Wilms
– Jonas Wilms, Commented May 4, 2020 at 21:58
Well ... didn 't knew that. I have always done well with role[]=SW&role[]=EW. Nice to know. Thanks for the clarification. — Marcel
– Marcel, Commented May 4, 2020 at 22:02
@marcel yes, seen both. Finally looked it up, seems as if this is not specified at all (not even the &, = syntax), so all of this actually depends on how your backend handles it. So my previous comment doesnt make that much sense, sorry. — Jonas Wilms
– Jonas Wilms, Commented May 4, 2020 at 22:06

Jonas Wilms · Accepted Answer · 2020-05-04 21:55:40Z

3

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("&");

edited May 4, 2020 at 21:55

answered May 4, 2020 at 21:53

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

2 Comments

invrt Over a year ago

Thank you, this is perfect!

zzmaster Over a year ago

String should be not a "a=1&a=2" but "a[]=1&a[]=2"

Salmin Skenderovic · Accepted Answer · 2020-05-04 21:58:24Z

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()
)

answered May 4, 2020 at 21:58

Salmin Skenderovic

1,73010 silver badges24 bronze badges

Collectives™ on Stack Overflow

convert object key with array values to query string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related