將具有數組值的 object 鍵轉換為查詢字符串

Question

我正在嘗試將我的 object 轉換為查詢字符串，但我有一個數組作為值

我的 object 看起來像這樣

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

我的轉變已經進行到一半

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

哪個輸出： ?source=Secondary,Tertiary&role=SW,EW但我希望這個 output 看起來像這樣

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

誰能幫幫我？

Answer 1

您可以 flatMap Object 條目：

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

Answer 2

您可以使用 URLSearchParam 並遍歷 Object.keys 然后遍歷每個值

https://developer.mozilla.org/zh-CN/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() )