Preview
Video Player
00:00
00:00
Search for a Value in an Array
3:45Write a program using the join(), includes(), and indexOf() array methods you learned about earlier.
All right, now let's do some programming
using the join, includes, and
0:00
indexOf array methods you
learned about earlier.
0:04
We'll use the includes method
to search an array of products.
0:07
We'll create a small search feature for
a product list.
0:10
All products that are currently in stock,
like eggs, milk, and
0:14
bread get stored inside an array.
0:18
We'll create a program that lets you
search if a product is in stock or not.
0:21
The program will also list all of
the products that are in stock.
0:26
To follow along,
open the file search-list.js, and
0:30
make sure to update
the script tag in index.html.
0:35
The src attribute should
point to js/search-list.js.
0:38
This file has an inStock array holding
all the products that are in stock.
0:48
The search variable is assigned the value
a user types into a prompt dialog box.
0:54
When the script loads, a prompt dialog
displays to let the user know that they
1:00
can type a product name to
search the inventory list.
1:04
There is also a message variable
which we'll use to hold the message
1:07
that gets displayed on
the page to the user.
1:11
First, let's write the programming
to search the array.
1:14
If what the user types into the prompt
dialog matches a value in the inStock
1:18
array, we'll display a message letting
them know that the product is in stock.
1:23
This sounds like a job for
a conditional statement.
1:27
What should the condition be in this case?
1:31
Remember, the includes method searches for
a value in an array and
1:35
returns either true or false.
1:39
In the condition,
I'll check if the inStock array includes
1:42
the value assigned to the search variable.
1:47
If the condition evaluates to true, we'll
let the user know that the product is
1:50
in stock by assigning
the message variable the string,
1:55
Yes, we have the value assigned to search.
1:59
And to make the product text appear
bold on the page I'll place it within
2:05
strong tags.
2:09
If the product is not included in the
array, or inStock.includes evaluates to
2:15
false, we'll display a message informing
the user that the product is not in stock.
2:20
By assigning message the string,
2:26
Sorry we do not have
the value assigned to search.
2:30
I want to display the final message in
a paragraph that's inside the main element
2:41
of index.html.
2:46
I'll use document.querySelector
to select the main element.
2:47
Then set its innerHTML property to
a template literal holding p tags.
2:55
Between the tags, I'll insert or
3:07
interpolate the value of
the message variable.
3:09
Before I view this in the browser,
I'll open index.html and
3:13
change the heading text to Product List.
3:17
I'll save my file and
test what I've written so far.
3:24
The prompt dialog appears,
I'll type pizza, click OK,
3:28
and I see that yes, pizza is in stock.
3:32
Refresh the browser, what about celery?
3:36
This time I get the message,
Sorry, we do not have celery.
3:41
Good, it's working.
3:44