Express JS #4 - Query Parameters

Summary

This 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

00:00

🌐 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.

05:00

🔍 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.

10:01

📝 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.

Keywords

💡Query Strings

Query strings are a part of a URL that appear after a question mark (?) and contain key-value pairs. They are used to send data to a web server without changing the page or resource being requested. In the video, query strings are used to pass parameters to backend servers, allowing for dynamic data retrieval based on user input or application state.

💡Query Parameters

Query parameters are the individual key-value pairs found within a query string. They are used to send additional data to the server. In the script, the speaker discusses how query parameters can be used to filter and sort data retrieved from a backend, such as sorting users by username or filtering users by a specific substring in their username.

💡Backend Development

Backend development refers to the server-side of software development, where the primary focus is on the server, database, and application logic. The video script discusses backend development in the context of handling query strings and parameters to manipulate data before sending it to the client.

💡URL

A URL (Uniform Resource Locator) is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. The script mentions URLs in the context of where query strings are located, specifically at the end of the URL after the domain and route.

💡Key-Value Pairs

Key-value pairs are a fundamental data structure used to store data. In the context of the video, key-value pairs are used within query strings to send data to the server, where the key is the parameter name and the value is the data associated with that parameter.

💡HTTP Request

An HTTP request is a message sent from a client to a server to request access to a resource. The video discusses GET requests, which are a type of HTTP request used to retrieve data from a specified resource, often utilizing query parameters to define the data to be retrieved.

💡Request Object

In web development, the request object is a structure that contains all the information about an incoming HTTP request. The script explains how the request object in a Node.js/Express application contains properties like query parameters, which can be accessed to handle data sent by the client.

💡Filtering

Filtering is the process of selecting a subset of items from a larger set based on certain criteria. The video script describes how to use query parameters to filter data on the server side, such as returning only users whose usernames contain a certain substring.

💡Sorting

Sorting is the process of arranging data in a specific order. The script provides an example of how query parameters can be used to sort user data, such as sorting an array of user objects alphabetically by username or by ID in ascending order.

💡Substring

A substring is a contiguous sequence of characters within a string. In the context of the video, substrings are used in query parameters to filter data, such as retrieving users whose usernames contain a specific substring.

💡Mock Data

Mock data is fictional data used for testing purposes. In the script, mock data represents user objects that might be retrieved from a database, and it is used to demonstrate how query parameters can be used to filter and sort this 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