Search for a Value in an Array3:45 with Guil Hernandez
Write a program using the
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
You need to sign up for Treehouse in order to download course files.Sign up