- From: Jeremy Nguyen <notifications@github.com>
- Date: Wed, 22 May 2024 17:31:30 -0700
- To: whatwg/url <url@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <whatwg/url/issues/828@github.com>
### What problem are you trying to solve? Effectively, for a URL object, setting the `searchParams` (and by extension `search`) to some URLSearchParams object. Currently, the `urlSearchParams` property is read-only (see: [URL: searchParams property](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams)). Hence, to update the searchParams, one would have to update the `search` string property manually instead. This is not ideal as developers may want to work in terms of objects rather than strings (`new URLSearchParams({ foo: "bar", baz: "qux" }`) is much more readable compared to `"?foo=bar&baz=qux"`). Being able to set the searchParams property without having to go through a string intermediate can be a pretty common case, such as appending multiple entries at once, or initializing with some default values. ### What solutions exist today? Today, to update the searchParams, one would either have to run the `delete()` method for all current entries and `set()` for all new entries (which is impractical) or update the `search` string property manually such as: ```js function setUrlSearchParams(url, searchParams) { if (searchParams.size === 0 || searchParams === null) { url.search = ""; } url.search = "?" + searchParams.toString(); } ``` However, since `URLSearchParams.toString()` and `URL.search` are not the same value, this is slightly more complicated The `toString()` does not include the question mark `?`, while `URL.search` does. This doesn't mean just by appending "?" that the proper value, since for both, an empty string is equivalent to a null query. ### How would you solve it? I am not certain on the implementation details of the function, since just implementing the `setUrlSearchParams()` shown earlier method seems redundant (as you would have to parse the string into a `URLSearchParams` object to get the new `.searchParams` property), but in general, having a function `URL.setSearchParams` can make some tasks easier. For instance, for the cases I mentioned: Intializing a URL with default values ```js // previously, with string immediate const url = new URL(`https://example.com?${new URLSearchParams({ foo: "bar", baz: "qux" })}`); const url = new URL("https://example.com?foo=bar&baz=qux"); // with a setSearchParams() method const url = new URL("https://example.com") url.setSearchParams(new URLSearchParams({ foo: "bar", baz: "qux" })) ``` Appending multiple entries ```js // url already has search parameters const url = new URL(`https://example.com?${new URLSearchParams({ foo: "bar", baz: "qux" })}`); url.setSearchParams(new URLSearchParams([["foo", "bar"], ["baz", "qux"], ...url.searchParams])); ``` ### Anything else? _No response_ -- Reply to this email directly or view it on GitHub: https://github.com/whatwg/url/issues/828 You are receiving this because you are subscribed to this thread. Message ID: <whatwg/url/issues/828@github.com>
Received on Thursday, 23 May 2024 00:31:33 UTC