How to Generate and Filter a list with Javascript using forEach() and filter() functions.

hello i hope your day is going great my name is jay and in this video i want to show you how you can use filter if you have like an array and when i say erase like a list of things and you want to filter by something specific so for example if you have a list of people and you want to filter by h that's very easy to do with the filter function so let's go ahead and do that here i have my html um there is nothing here yet i just have an h1 a [Music] div with a class of list is totally empty i have some css as you can see here some css and by the way this code is in a link in the description of the video so if you want the whole code you can go there and get it all right first thing i want to do is create a javascript file so i'm gonna go here let's call it main.js file um all right let's go back and let's call it right here so script main js there you go let's save it that's it and now we go here first we need a list we need we need an array of some type of data so i'm just going to copy and paste one here all right so this is the array actually let me put this here there we go um and we need to put this inside a variable so let's do const um i don't know people array is equal to this okay so now we have this array and as you can see this array is an array of objects so each one has a name h gender and an account active so these are things that i added just to filter by h by gender maybe by name you can filter this however you want using the filter function so let's go ahead and do that first thing i'm going to add the list inside this list div right now it's empty with a sad face emoji so let's go ahead and do that let's first get the uh list element the the actual div let's call it list equal to document query selector and let's get that list which is i think is the class class list let's go ahead yep so there you go class list let's go back all right we're good and now i need to add that list maybe maybe just the name we can just add the name to this empty div right here so let's create a function do cost add list we can call it you can call it whatever we want this function equals two and i'm gonna do an arrow function just like this okay and this is gonna take two so let's do the array and the element which is going to be this list right here this variable okay let's keep going so what i'm going to do is i'm going to take the array and i'm going to do a for each loop just like this okay oops no not two array that one all right for each and now we need to create a list element like an li so i'm gonna do const li equals to document dot create element just like this and we're gonna do an ally so now we created an ally from nothing it doesn't exist we created it all right and don't get confused by it it's just creating one li you can do a div if you want to you can do whatever you element you want and now i'm going to do li text content so the task content inside the li is going to be actually list changes element because it's confusing i already have an element here this is going to be i item or whatever you want doesn't have to be item um is it going to be item my god there you go and we're gonna get the name dot name right here the name of the people all right so we have now the name inside the li and now we have to append that so let's do element dot append child ally so let me explain this a little bit better okay this is a function is getting an array and it's getting an element the array that you put here is gonna do the for each function so it's gonna look at each object here all right it's going to create a li is going to add the item whatever item is here which is like this for example so each one is an item so this is an item this is another item this is another item and this is another item okay and we're doing um add task test content which is the test text inside the li item dot name we can do h we can do item.h item whatever so we want the name and after that's done then we want to append the child um the ally to the element which is whatever we want to put here which is going to be the list so all we have to do now is run this function at list remember array first so the array is called a people array so people array coma and element is going to be the list which we have right here all right i'm going to save that and there you go we have a jerry jessica lauren fabian or fabian all right and as you can see if we change it here for example if i put h or gender or whatever you want there you go male female male all right hopefully you get that and you understand that for now we're just adding that list to the dom that way you can see it here and now i want to filter it so let's go ahead and play with that so what i'm going to do is i'm going to create here a new array so i'm going to do const filter it array or call it whatever you want and we need to get this original array so let's do people array dot filter oops dot filter and let's do person remember this is kind of like the same thing that we did here with the item right here getting each one of them so same thing some i'm just changing it to person and here we can do okay um the conditional so let's say if person dot h is um i don't know more than 40 then give me that all right so what i'm gonna do here i'm gonna change this to down here and instead of people array i'm going to add the filtered array and let's see that let's save it jerry all right let's see if that's actually true so now it's only jerry it seems like jerry's the only one um over 40. so jared 58 um 32 yep that is correct jerry is the only one over 40. all right let's do a specific name a very very specific name let's go ahead and let's do um dot name equals to this is a string fabian or fabian papillon is better actually so let's save it there we go is the only one that actually is equal to that name so that's working that's perfect that's very specific actually let's do another one let's do a gender gender equals to female save jessica and lauren all right let's let's make sure that's true yeah so you can see female female the only one let's do another one let's do um actually let me put this a little bit i want to see it more there you go that's better all right actually let's close this all right now this is better now we have a lot of space let's go back here all right now we're good all right well what else we can keep testing this filter um person dot oh we have an account active let's do account account active let's keep it like this so this is like saying a personal account active is is this true or false let's save it all right so jerry jessica and lauren our account active let's see actually jessica says processing it doesn't set true or false he says processing so it's kind of true is true but it's not true at the same time because there is something there right there is like the the code is is just looking at saying okay there is something here this is true it doesn't say true but there is something there so we need to be very specific if you want to be like the real real true so we can do this equals to true save there you go so now jerry and laurie and simpson the only one that is true all right and you can say false same thing so fabian fabian now you can get very creative with this it doesn't have to be like this for example i want to find the person with the first letter we let's say j all right so let's go ahead and do this person name i'm going to use the match and here we can use a rejects a regular expression if you don't know what we just x is um i have a video so go to the description of the video of this video and go there and you can learn about it so you can feel more comfortable because it looks like an alien is coding when you when you code rejects let's do this so this is how we start now let's go ahead and say if it starts with is this it starts with the letter j and then globally save that there you go so we're getting um the name that starts with the letter j and of course jerry and jessica so hopefully you can see the power of the filter function you can do this let's say you can press a button to filter you can have drop downs and build your own function when a button is clicked or a drop down or something but you can understand how it works now hopefully this this is something new that you learned that's it subscribe if you want to keep learning and click on the bell icon to receive notifications every time i upload a new video thank you so much for watching have a beautiful day bye bye

Channel: iEatWebsites

Views: 1,279

Rating: 4.9428573 out of 5

Keywords: javascript, filter, arrays, foreach, filter list, filter array, foreach loop, javascript filter

Id: M0xddPs_6w8

Length: 13min 23sec (803 seconds)

Published: Sat Feb 06 2021