Express JS #4 - Query Parameters
Summary
TLDRThis video script explains the use of query strings and parameters in backend development. It covers how they appear in a URL, their role in sending data across pages, and manipulating server-side data retrieval. The tutorial demonstrates filtering and sorting user data based on query parameters, using JavaScript's array filter method. It also shows how to handle cases where query parameters are incomplete.
Takeaways
- 🔍 Query strings are used to send data at the end of a URL, following a '?' symbol.
- 🔑 Query parameters are key-value pairs that can be added after the '?' in a URL, separated by '&'.
- 🌐 They are commonly used in web development to pass data between pages or to add additional data to HTTP requests.
- 📄 The query string is parsed into a JSON object by Express, making it easy to access the values.
- 🔄 Query parameters can be used to sort or filter data on the server side before sending it back to the client.
- 📝 In a GET request, query parameters are used to specify how data should be manipulated or filtered without altering the data itself on the server.
- 🛠️ Developers can use query parameters to implement features like searching or filtering within arrays of data, such as user objects.
- 📊 Filtering can be done based on substrings within specific fields of an object, like 'username' or 'display name'.
- 📈 The script demonstrates how to handle query parameters in a Node.js/Express application, including checking for their existence and applying filters.
- 💻 It's important to ensure that both the filter type and value are provided in the query parameters for the filtering to work correctly.
Q & A
What is a query string?
-A query string is a part of a URL that appears after a question mark (?) and contains key-value pairs that are used to send data to a web server.
How are query parameters used in backend development?
-Query parameters are used in backend development to send data from the client to the server, filter and sort data, and manipulate data retrieval from databases based on specific criteria.
What is the purpose of the equals sign '=' in a query string?
-The equals sign '=' in a query string is used to assign a value to a key, similar to assigning a value to a variable, but in the context of a URL.
How can you pass multiple key-value pairs in a query string?
-Multiple key-value pairs in a query string can be passed by separating each pair with an ampersand (&) symbol.
How does a query string differ from a request body?
-A query string is part of the URL and is used to send data to the server without changing the state of the server, while a request body is used in POST requests to send data to the server that may change its state.
What is the role of the request.query object in Express.js?
-The request.query object in Express.js is used to access the query parameters sent in the query string of the URL.
Can you provide an example of how to filter an array based on a query parameter in Express.js?
-Yes, you can filter an array based on a query parameter by accessing the request.query object, destructuring the specific query parameter, and using it as a condition in the array's filter method.
What is the significance of the includes method in filtering query parameters?
-The includes method is used to check if a string contains a specific substring, which is useful for filtering data based on partial matches of strings in query parameters.
How do you handle cases where only one of the query parameters (filter or value) is provided?
-You should handle cases where only one query parameter is provided by checking if both parameters exist and, if not, returning the original data without applying any filters.
What is the purpose of the filter function in JavaScript when dealing with query parameters?
-The filter function in JavaScript is used to create a new array with all elements that pass the test implemented by the provided function, which can be used to filter data based on query parameters.
How can query parameters be used to sort data retrieved from a server?
-Query parameters can be used to specify sorting criteria such as sorting by a specific field or in a specific order, which the server can then use to sort the data before sending it back to the client.
Outlines
🌐 Understanding Query Strings and Parameters
The speaker introduces query strings and parameters, explaining how they appear at the end of a URL in a web browser. They describe the structure, which includes a question mark followed by key-value pairs separated by an ampersand. Query strings are used to pass data in backend development and can be sent from one page to another or to add additional data to a server-side request. The speaker uses an example to show how query strings can be used to manipulate data, such as sorting or filtering a list of users based on specific criteria before it is returned from the server.
🔍 Implementing Query String Filtering
The speaker elaborates on how to use query parameters for filtering data. They demonstrate setting up a route handler that expects two query parameters: 'filter' to specify the field to filter by (either 'username' or 'display name'), and 'value' for the substring to match within that field. The speaker shows how to destructure these parameters from the request object and implement a filter function that checks if the specified field in user objects contains the given substring. If both parameters are provided, the function filters the user array accordingly; otherwise, it returns the unfiltered array.
📝 Testing Query String Functionality
The speaker tests the functionality of the query string filtering by making GET requests with different query parameters. They show that without any parameters, the full user array is returned. When providing only the 'filter' parameter without a corresponding 'value', no data is returned as the request is pending. However, when both 'filter' and 'value' parameters are included, the server correctly filters the user data based on the criteria. The speaker also discusses handling cases where only one parameter is provided, ensuring that the server does not perform any filtering in such scenarios and returns the full user array.
Mindmap
Keywords
💡Query Strings
💡Query Parameters
💡Backend Development
💡URL
💡Key-Value Pairs
💡HTTP Request
💡Request Object
💡Filtering
💡Sorting
💡Substring
💡Mock Data
Highlights
Introduction to query strings and parameters in backend development.
Explanation of query strings appearing at the end of a URL.
Description of how to use key-value pairs in query strings.
Use of the ampersand (&) as a delimiter for multiple query parameters.
Query parameters used for sending data across pages in web development.
Sending query parameters from client-side to server-side to add additional data to requests.
Example of using query strings to manipulate data retrieval on the server-side.
Demonstration of sorting users array based on alphabetical order using query parameters.
Explanation of filtering users based on a substring in their username.
Guide on how to send query strings to a server.
Console logging of the request.query object to access query parameters.
Building a realistic filter function to handle query parameters for user data.
Destructuring the query object to access specific query parameters.
Implementation of a filter function to return user objects based on substring matches.
Testing the filter functionality with different query parameters.
Handling cases where query parameters are incomplete or undefined.
Ensuring that both filter and value query parameters are defined for proper filtering.
Finalizing the implementation by handling all cases of query parameter presence or absence.
Transcripts
so now I'm going to go ahead and talk
about query strings and query parameters
and how they are used in backend
development and how we can actually use
them ourselves so many of you may have
seen something at the end of the website
address so in the browser uh address URL
you might see this question mark and
then you might see something like key
equals value and then you might see an
ENT symbol and you might see another key
equals value this is known as a query
string so right over here this question
mark symbol denotes that we have a query
string and they go at the end of our uh
defined route over here okay so you have
the domain and then the route the path
and then the query string at the end and
then after the question mark you
basically just pass in whatever key
value pairs you want so for example I
have uh a key called key and I use the
equals operator to assign a value to it
so it's kind of like assigning a value
to a variable but only we're doing it in
the address bar so key equals value and
if I wanted more query parameters in the
query string I can just simply use this
ENT as a delim so ENT and then the next
key value pair so key2 equals value to I
can have as many query parameters as I
want now there are different ways that
you can use Query parameters in web
development you can send query
parameters from a page to another page
on the client side so that way you can
send data uh across different pages so
let's say if one page needs data from
another page when you're navigating then
you can grab the values from the query
query string if you're sending it from
the client side to the server side
typically you would send a query string
to uh add additional data to the request
that you normally wouldn't add in a a
request body we haven't gone to post
requests just yet but I'll stick to a
get request as an example so when you
make a get request remember that you are
performing a request an HTTP request to
get data in readon format you're not
manipulating any data at all on the
server side so sometimes you might need
to retrieve the data but you also want
to have that data already um manipulated
in a certain way on the server side so
for example up top over here I added a
couple more user objects so let's say I
have this users array and let's pretend
it's from the database and let's say I
want all of these users returned back
but I wanted it sorted in alphabetical
order based on the username or you can
also have it sorted based on the display
name maybe you might also want it sorted
in um from least to greatest based on
the ID value since these IDs are
integers so you would use a query string
to do that let's say if you also wanted
to filter out some some results from the
users itself maybe you don't want to get
every single user from the database you
only want to get only specific users
that match where their username matches
a substring so maybe I only want to get
all the users that have an A in their
username field so hopefully that makes
sense with query parameters and how they
can be used so let's go ahead and see
how we can actually send query strings
and query parameters to our server so
inside my/ API users route inside the
request Handler function I'm going to go
ahead and conso log this request. query
object remember how I said earlier the
request object has everything that you
can possibly get in regards to the
request itself so earlier we referenced
request. prams to get the route
parameter so to get the query parameters
from the query string we just ref
reference request. query so let's go
ahead and send a query string when we
are making this request to the/ users
and point so I'm going to use the
question mark symbol and then provide
some key value pairs I can literally
pass any key value pair I want so let's
do something like filter and we'll
assume the filter is going to be based
on username um so I'll do filter uh
Anson and I'll go into my console uh let
me actually just rerun the request so
you see how whenever I send a request a
get request to that endpoint in the
console it logs that request query
object and it has the filter which is
the key that I passed in the query
parameter filter it is showing up as a
field in that object that query object
and we have the uh string Anon as the
value so the query string gets parsed
into a Json object by Express so we can
very easily grab the values let's go
ahead and actually do something
realistic with the filtering so what
I'll do is this I want to make it so
that I can filter based on sub some
substring so I want to go ahead and also
make it so that I can also set which
field in this mock users array in in
these objects I want to make sure I can
set which field I want to filter on so
maybe I want to alternate between
filtering by username or display name so
for the filter value we can expect it to
only be two possible values
username or display name and this will
tell us what uh key in the user object
what field to filter by or yeah what
what field to filter and then we will
add an additional query parameter you
can call it whatever you want but I
guess we can call it a value just to
keep things simple and then this value
will basically be the uh the text the
substring that you want to have that
username contain so if I want to filter
everything where it contains the an
substring so a an substring then we
would have to search for that okay so
I'm going to send these two query
parameters to the server okay so now I'm
going to go
into go back to the request Handler for
the users endpoint and what I'll do is
this I'm going to
destructure that query object from the
request object and then I also want to
destructure from the query
object the two query parameters filter
and value and I can do that all in one
go like this so I can use so after query
I can additionally destructure
properties from query so let's do filter
and value and so what I want to do is I
want to make sure that both of these
query parameters exist because of course
if they don't exist then we're not going
to do any filtering at all so the
easiest case that we can handle is we
check to see if both of these values are
undefined because if they are then we
don't need to do any filtering we just
return mock users as is so we'll you
write an if case if there's no filter
and there's no value then we will just
simply return response. send and then
call or not not call uh pass and mock
users in this do send method call okay
that's the easiest case I'll write a
simple comment when filter and and value
are
undefined
okay and we always want to make sure
that both of these query parameters are
defined because you need both of them of
course you can't have a value and not
know what field in the user object you
want to filter by and if you have the
filter query parameter defined you need
to make sure you have an actual text
that you want to filter uh that you want
to filter based on so we need to make
sure that both of these are defined so
we'll do if filter and
value if filter n value we will
return and we'll call response. send and
from here I should just be able to write
a simple filter function so mock users I
can use the filter function on the array
and pass in a predicate so what we're
going to do is we're going to pass in
this callback function also known as a
predicate function and this will this
callback function has uh the user as an
argument and then what we want to do is
we want to filter out all of the we want
to filter all the user objects that
match that have that value as a
substring so it's pretty easy we can do
user. username cuz remember we're
filtering by by the
username or actually it would be user
square brackets filter okay and this is
assuming that filter would either be
display name or username
so user filter so this would grab the
correct field and then we would want to
so this is a this is going to be a
string so we would want to make sure we
check to see if the string
contains that substring so we actually
have this um
includes and this method returns true if
search string appears as a substring of
the result of converting this object to
a string okay so I can pretty much call
do
includes and I'll pass in the value so
this will filter all of this will
basically grab all of the user objects
that pass this predicate so if the user
and whether we are filtering by username
or display name if let's say for example
let's stick with username if the
username includes the value that we're
trying to filter then it's going to
return that into a new array and then
once all of the filtering is done we're
going to send the the entirey back so
let's go ahead and test this out so
right now if I let's do this if I don't
have any of the query parameters at all
you can see that it will just return the
array as is okay it doesn't uh it
doesn't do anything wa everything's
sorted we have everything the way it is
nothing is sorted nothing is done let's
go ahead and add a filter so filter
let's filter by
username and now notice how if I were to
only have the filter but no value you'll
see how it doesn't return anything yet
the request is still pending that's
because we need both filter and value
okay we'll handle these cases as well so
let's go ahead and handle the case where
we have both filter and value as a query
parameter so for the value query
parameter I will set this to be a n and
now you'll see this will grab me all of
the user objects where the username has
a n as a substring and if you look right
over here it seems to be filtering
correctly uh I can go ahead and do
another simple case where let's
filter the username where it includes e
as a substring and you can see that
seems like the only username that I have
that has an e as a substring is
Henry okay uh let's see what else let's
try
um let's try
a I have 1 2 3 4 5 so it's missing uh
this object Henry so our filtering is
working great okay so let's just finish
this out um so let's make sure we handle
all the other cases where if we don't
have both of
these um both of these defined then we
return the same mock users that is in
memory so we don't do any filtering at
all so I think the easy thing to do is
actually this instead of uh doing this
if check right up here where we check
both a filter and where we check if
there's no filter and there's no value
what we'll do is we'll check if there's
a filter and if there's a value and if
this condition fails and that means it
only has one or the other defined or
both are undefined so then we'll just
return response. send
mock users so I just realized that I'm
going to fix that real quick and now
when I go back to the browser if I only
have one query parameter it won't do any
filtering at
all okay hopefully this makes
sense
5.0 / 5 (0 votes)