Query Parameters in JavaScript (3+1 Ways)

[@OfficialDevTips]

That cool inline evaluation thing is called *Quokka* quokka.devtipsshow.com

[@normanperrin6491]

Instead of creating an `` element, you could use `new URLSearchParams(window.location.search)`. Also in node you could require the `url` lib and use it with `URLSearchParams` or `URL`. If you don't want to split the string yourself you could initialize an `URL` and then access the `url.search` for the search string, or `searchParams` for access the interface of `URLSearchParams`.

[@nicoregules]

i was about to comment this, using URLSearchParams.entries() you get an iterator with all the key/value pairs

[@OfficialDevTips]

Thanks for sharing! Great ideas!

[@mazyvan]

I thought the same

[@shgysk8zer0]

I knew this wouldn't have the real JavaScript solution as soon as I saw `const URL`. Best JavaScript solution: const url = new URL('...'); url.searchParams.delete('gclid'); Done.

[@MichaelSalo]

Done as long as it's acceptable to crash all versions of IE.

[@mazyvan]

@@MichaelSalo there's one thing called transpilers

[@MichaelSalo]

@@mazyvan My understanding is URL object is a browser API not a JS API that would normally be transpiled.

[@jameshamann465]

You need a polyfill for Internet Explorer

[@RomanSteiner_xD]

@@MichaelSalo I guess if he uses `URLSearchParams`, he could also use `URL`. Neither work on IE.

[@cspear888]

Can you also teach how we design our own query parameters?

[@mattcroat]

You're a treasure David.

[@Xizmoify]

Not sure if it fits this channel, but perhaps working with node.js and some websockets. Or perhaps building your own npm module

[@matthewbarbara2916]

Each time I needed query params to be allowed in the URL I've always used ?something=value. However, few months ago I needed to convert a JSON object into a query parameter to be passed in the URL and my colleague asked me why would I use such technique to pass the object in the URL rather than having a stringified JSON object pasted in the URL directly. Whilst this sound very ugly to me I could not really provide him an answer more than that most websites pass parameters in the url with ?something=value. What would be the drawback to have example.com/'{"something":"value"}" over the more common practise of ?something=value ?

[@OfficialDevTips]

You have to escape the characters (so not you happen to have a ”/” that the browser thinks is a path). So a { becomes %7B. Each necessary character in the JSON format takes unnecessary space and you risk of oretty fast rinning into the length limit of urls. See this post blogs.dropbox.com/developers/2015/03/json-in-urls/

[@AlvarLagerlof]

How about this? You can extract anything after. const url = "test.domain?filter=hardcover&gclid=" const params = new Object() url .split("?")[1] .split("&") .forEach(param => { const [key, value] = param.split("=") params[key] = value }) console.log(params["filter"])

[@MightyArts]

Hey quick question, what's the name of the VSCode extension that it tells you the value / type etc. of an element or variable when you do //? ? Thanks in advance :D

[@OfficialDevTips]

It’s called quokka. Link in the description.

[@jasonjara3453]

It's Quokka. quokkajs.com/

[@MightyArts]

@@OfficialDevTips Thanks a lot for the reply! Love your videos :D

[@HashimWarren]

why does a.search only produce what's after the ? mark

[@HashimWarren]

oh, ok - the search method on a string returns everything after the question mark

[@mykolasenechyn8177]

How are getting variable values inline in your code?

[@OfficialDevTips]

It’s called quokka. Link in the description.

[@mykolasenechyn8177]

@@OfficialDevTips Thanks!

[@md.akib5124]

wow man you are a genius

[@pureretro5979]

Splitting the new URL on the question mark in the 3rd example seemed like a quick solution (although one I'd probably use myself) rather than rebuild the URL from the location.protocol, host and pathname parts. Still, all these options work so it's all good. :-)

[@OfficialDevTips]

Yeah. Probably it would have been better to show off another way of doing it, the one you suggest is good.

[@MrPDTaylor]

I just learned this for the first time earlier today! Mere coincidence, I think not!

[@zeocamo]

Why not just use the new Url() ??? This 3 ways look like walking over the sea to get water

[@yassine_klilich]

great solution using DOM API (y)

[@Dr3amDisturb3r]

Eeyyy new intro! Now some sound effects please! :)

[@kirillpavlovskii8342]

Nice

[@tekushinio]

hej monika XDD

[@HeeyStrong]

Good to know the good ways of querying those params, thanks lel

[@OfficialDevTips]

Haha I appreciate someone finds this video useful. Sometimes things you yourself stumble upon are not that interesting to other people. 🙀😅

[@SamzehGFX]

I created a js micro library for parameter manipulation. Helped me a bunch on some recent projects... github.com/samb97/pram.js

[@UniBreakfast]

God, the muar from your sweater is painful.)))

[@mohamedmorh]

keep on hacking :D

[@zeocamo]

Why not just use the new Url() ??? This 3 ways look like walking over the sea to get water