Question

我正在尝试根据对象及其属性更新网址。

URL为http://www.mywebsite.com/f/o，我想根据此对象属性更新其查询参数

queryObject = {
  example1: ['param1', 'param2'],
  example2: ['param3'],
}

因此，在这种情况下，完整的网址应为http://www.mywebsite.com/f/o?example1=param1,param2&example2=param3

当用户单击列表元素时，对象属性会更新，因此数组中的属性和索引的数量可能会发生变化。

你能帮我实现这个目标吗？

非常感谢

Answer 1

let queryObject = {
  example1: ['param1', 'param2'],
  example2: ['param3'],
}

// creating a new URL
const url = new URL('http://www.mywebsite.com/f/o')


// adding/appending queryObject key - value pairs to URL query params
Object.entries(queryObject).forEach(([key, value])=> {
    url.searchParams.append(key, value.join(','))
})

console.log(url)
// logs:-> http://www.mywebsite.com/f/o?example1=param1%2Cparam2&example2=param3

// decoding encoded characters in url
console.log(decodeURIComponent(url))
// logs:-> http://www.mywebsite.com/f/o?example1=param1,param2&example2=param3

要使用新的url更新当前页面URL的查询参数

document.location.search = url.search

根据对象属性更新URL查询参数

1 个答案: