fetch

URLSearchParams in JavaScript - Constructing Query Strings



Sharing buttons:

hey guys hey gone my name is dumb and in

this video I'd like to take you through

the URL search params objects inside of

JavaScript so basically this object

allows you to work with query strings so

it lets you add remove or retrieve key

value pairs from a kueh string so you're

actually able to construct a brand new

query string or even work with existing

cruising's so we're gonna start to

explore this object with a existing

query string

okay so inside the source code for this

document it looks like this

so inside the script tag let's begin

with an existing query string and then

use the URL search params object to

manipulate and display the data

okay so let's define a new constant up

here and this will be the existing and

query string so I'm going to call this

one query string okay equal to a fake

query string such as name equals Dom and

age equals 45 and occupation equals

software developer okay so we have our

existing sample query string you might

see this on Google searches or you know

YouTube searches and we have an existing

query string so we're actually going to

pass this string into a URL search

params object to be able to easily

manipulate it okay so let's make a new

constant down here and call this one USP

short for URL search params equal to a

new instance of a URL search params okay

inside this constructor it takes a

single argument that being in this case

we're going to pass in the query string

okay so now we have two constants that

first one being the raw string we're

passing it in to an instance of

so the constructor of the Euro search

frames to give us an instance okay so

this lets us easily manipulate the

string so here we have obviously we have

name equals Dom and so we have these

these little tokens which separate the

data this thing is going to actually

read this for us and provide useful

methods to add or remove or display

these key value pairs so I'm down here

I'm going to console dot log the new USP

object okay so I'm going to save this

and refresh the browser and you can see

we get a URL search params instance if I

expand this in the prototype we see all

these useful methods okay so the main

ones is going to be gets set and to

string ok so let's explore these ones in

this video ok so back inside the code

let's begin with the to string method so

I'm gonna say this console dot log USP

dot two string okay and that one right

there is going to convert this object

back into the raw query string form so

if I save this and refresh the browser

we get the original raw query string so

you're going to want to use this two

string method when you're making your

HTTP requests okay and this actually

will also encode your data so if I was

to add a curly brace at the end of this

and then save this and refresh the

browser we actually get the encoded

version of that curly brace that's

obviously very useful also okay so I'll

just remove that okay so

let's use a for loop to loop over each

one of these key value pairs so down

here let's type out for make a new

constant okay and then use array D

structuring and we're gonna say key and

then value of USP so this means we're

looping through each key value pair

using array D structuring of the URL

search params object so now we have key

name age and occupation value Dom 45 and

software developer so I can they have

console.log and then pass in here using

a template string gonna pass in here key

it's equal to and then the value all

right so I can save this and refresh the

browser and we can see we have the

individual data displayed right there

all right so obviously it's done all the

hard work of actually extracting this

for you and it's presented it in a nice

for loop okay so now we have the get and

set methods so these are the two main

methods they let you get and set values

okay so up here before this loop let's

just let's just get a key value pair

okay or should I say get a value okay so

let's make a new constant I'm gonna call

this one my name okay

equal to us P dot get and then passing a

key here we're gonna pass in the name

King all right so now we're getting the

value of the name key in this case is

gonna be done right there so name equals

dumb get name okay so I can then

console.log down yeah I'm gonna say

value four

you value for name please and then pass

in here my name alright so I can save

this and refresh the browser and we get

value for name is done perfect okay we

also have the set method so the set

method allows you to update an existing

value by key or actually create a new

key value here okay so down here let's

use the set method we're gonna say us P

dot sets we're gonna pass in a key

followed by a value so I'm gonna say key

that same name and then change the name

to two Jeff alright

I'll save this and refresh we now have a

value for name is done as the existing

name or the previous name it is now Jeff

and we have Jeff in the actual query

string Apple okay we can also create a

new key by Pierre I can say USB that

sets the key of YouTube to the value of

decode okay if I save this and refresh

the browser this time we see YouTube and

decode right there and it of course gets

added to the actual outputted query

string also alright cool so we have

those three methods right there get set

and two string so that is the main use

of a query sight a URL search params

object however this constructor takes in

multiple different types what you can do

is actually begin with an object okay so

this is actually where it comes in handy

quite a bit so if I wants to remove that

line right there just comment it out and

inside here instead I'm gonna pass an

object ok so right there I'm gonna say

name is dumb

is 45 and occupation is software

development so as you can see I'm

actually putting a space here instead of

a plus sign and but basically we're

passing in an object instead of a string

so if I save this and refresh we get the

same result okay so here clearly if you

have an app where you're making a

external request and you want to

construct the actual form data or the

get request parameters you can

definitely use this object syntax

because most of the time you actually

want to construct this so you start with

an object right and you construct the

actual query string so that is probably

the most common use case okay so and

that is for using an existing query

string or existing data but what you can

do is you can even begin with an empty

object so if I pass in nothing to the

constructor this time we have an empty

your our search params instance okay so

if I was to save this and refresh this

time we get no for the name as it's an

empty objects okay and then we set the

value of name and then we're displaying

the name and YouTube keys with their

respective values and then ending up

with a query string so that what they're

also maybe a very common use case for

this object right so um in a future

video I'll be talking about how to

actually use this with the fetch API to

actually make requests but for now that

is all for this video thank you for

watching and I'll see you later