query

Node JS Tutorial for Beginners #29 - Query Strings



Sharing buttons:

you're something guys welcome to your

29th nodejs tutorial and in this video

we're going to talk about query strings

alright and so what is a query string

exactly well it's just additional data

added onto a HTTP request in the form of

name value pairs and we often see this

with patron ation of blogs of some kind

where we say we want to see all the blog

posts for example from the news category

so this is the URL here for slash blog

forward slash news and then we've got

this query string right here which

starts with the question mark and we're

saying that the page is equal to 2 so

the second page of news items in the

blog right so this name value pair page

equals 2 is what is attached to this get

request so the way we construct a query

string is just by tacking on a question

mark after the initial URL and then add

in our name value pairs separated by

ampersands if there's more than one of

them

so we could make a request like this

mysite.com forward slash contact then

the start of the query string has the

question mark then we've got a name

value pairs person equals ryu then we

add another name value pair by first

same ampersand so and the department or

depth equals marketing and we can do as

many of those attach to each other as we

want by just adding on these ampersands

after each one but we always begin it

with a question mark like that ok so say

we make a request like that we pass on

this additional information and which we

want to use and what we need to do is

pass that request and pull out this data

so that we can use it within our

application code so let's look at an

example

all right there so let's imagine that

when we go to the contact URL that we've

set up a route for in previous tutorials

we could send along some extra data in

the form of a query string such as the

person we want to contact or the

department we want to contact right so

say for example we do something like

this I'm just going to come to a browser

so forward slash contact and then we

create a query string where we saying

Department equals MA

kitten and person equals joke so we've

seen here okay with sending along this

extra information we want to contact the

marketing department and Joe okay so how

do we handle that well in nodejs when we

use Express the request object does all

of this passing for us so it makes it

really simple to access this data so all

we have to do is use the query property

on this request object so for example

what I could do right here oops not on

this one on contact I could say

console.log and then request query okay

so this is an inbuilt property when we

use Express that we can access and it's

going to access what data is on the

query string so if I save this now and

I'm going to run it by saying no daman

app Jas now if I go to this right here

and press Enter so I'm passing along

this query string where depth equals

marketing and personal cost Joe so if I

click enter now then we're going to see

right here this object is logged down

here to the console so Department is

marketing and person is Joe

so Express has done all that for us is

passed this data and it's given us

access to it on this query property of

the request object so it's really easy

for us now to access this query string

data so see we want to do something else

with this data we want to pass it into

the view well we already know from

previous tutorials that we can pass data

to the view by just adding in an object

here in the render method so I could

pass through this query data right here

in the render method so let's cut that

from here and in fact let's just to

leave that altogether and pass it

through as an object right here so I'll

say the query string that's going to be

the name of my property in this object

and I'm going to paste that in and it's

going to be equal to with the request

query

okay so we're passing in any data that

we add into the query string through now

to the contact view okay so let's go to

the con

view and you're going to notice down

here I've added in a form I'm going to

go through that in a second but to begin

with let's just output that query data

in this view so let's come down here at

a P tag and we know how to output data

using ejs templates we covered that in a

previous tutorial it's the open angle

bracket percentage equals and then just

whatever the name of the object is or

value is that we want to help port now

we set along this object right here and

the property name is query string so now

I'm just going to output like a query

string object yeah and dot DEP T because

that's the department value on this

query string remember when we output

this to the console right here we had

two properties the department and the

person so I'm going to output the

department property okay makes sense so

let's close that off right now save it

I'm going to restart the server over

here just by saying RS and then go to a

browser and refresh this and now you can

see we've output this marketing value

right here because we accessed the

department property on the query string

object right there the DES property

there okay and we could do it with the

other one person if we wanted to I'll

just type in there person save it and

I'm going to come and restart the server

RS and hit refresh over here and this

time the person is output which is Joe

alright so let us now take a look at

this form a more useful kind of way to

use these query strings so I've deleted

that initial P tagger just popped in

right there and I'm going to uncomment

this form and this is just a really

simple form you can see it's got an ID

of contact form then we've got a label

for each input type so the four is equal

to whom and that matches up to the who

input type of text right so that's here

we wanna contact then we've got a label

for the department which Department and

this is the input for it then we've got

a label for the email your email and

and import for as well and then finally

the submit ball we're not going to look

at submitting this farm in this tutorial

just kind of pre-populating this form

with the data we can get from the query

string okay

so let's save this and say for example

we go to this URL with this query string

right here so we're passing along the

Department we want to contact and the

person we want to contact right so say

we go there let's just restart server to

catch those changes and refresh okay so

we've got this fall now if we add in

this query string right here with

whatever information for the Department

and the person I want it to pre populate

these form fields so that the user

doesn't have to do it okay so how can I

do that well I can access that data from

the query string in this template right

here so all I need to do is come to the

input fields right here and then set a

value equal to that data I remember it's

on the query string object but before we

do that we need to use our ejs tags

which is an open angle bracket

percentage equals then it's the q:s

object which we pass through dots and

this first one is who the name of whom

you want to contact so that is person so

let's close off those ejs tags as well

and do the same thing down here and sets

the value instead of a veil okay so

let's do the same thing here and this

time value is the EPT Department so

let's save that restart the server and

come to a browser and this time when we

refresh it's going to grab that data and

pre populate the farm for us because we

set this data equal to the value of

these form fields right pretty cool so

now if we change this data I'm going to

change this to Rio I'm going to change

the department to IT like so press Enter

this time we get Ryu IT so it's

pre-populating all those for your tours

and just imagine we had say a team page

on our website where it's the team of

all the people in the company and they

might have say and

one of each person say ten people and

when you click on the icon it goes to

the contact us page and it prepopulates

these fields for words based on who

we've clicked because you pass through a

query string as well pretty cool right

so that is query strings and how we

access the data from them in the next

tutorial we're going to be looking at

post data so submitting this form and

how we can handle that in nodejs but for

now if you've got any questions feel

free to ask those down below otherwise

guys don't forget to share subscribe and

like and I'm going to see you in the

very next tutorial