4.4 Filtering with jQuery.grep

[NOISE]. Hey there, welcome back to 30 days to learn jQuery, I'm your host, Jeffery Way. And while the previous lesson might have been a little difficult for some of you, today we get to sit back and take it a little easy. We're going to focus on a helper method or utility method. And jQuery core. And that's called jQuery.grep. So it may not be the best name, because it doesn't specifically refer to the traditional form of, of regular expressions and search and replace, but it can easily be used to filter down an array or object. So you'll find yourself doing these kinds of. Manipulations all the time when working in JavaScript, and I'll show you how to use it today. As always, I have a simple page, so we will, within ScriptTags, I'm going to create something to work with. So I'll begin by showing you the basic way it works, and then we'll take a look at maybe different ways that you could use it. We'll begin by creating an array and this array will simply contain numbers just so you can figure out how to use it. So I will create a variable and we'll just call it arr. And we'll fill this up with just some random items. So let's say that we want to filter this array now, and we only want to return the one set r say greater than five. How could we do that? Okay, well we used jQuery.grep for this. JQuery.grep, the first parameter is going to be what are we filtering through? But how do we know that? Well we've got to refer to the jQuery source. Or api.jquery.com. Again, I'm at code.jquery.com/Jquery.js, and I'm gonna look for grep and a colon. And there we go that's exactly what we need, so I will zoom in. Now as you can see here, we past three parameters to the grep method. The first one is elems. What are we working with? The elements or the array that we're manipulating? So if we come back, we will pass it in, we are working with. That array. Okay, well, what else? Well, we need a callback function for each one. Okay. That was easy enough, and then we have this third parameter that we're going to ignore for the time being, but that will mostly be a boolean, true or false, whether we want to invert the results. I don't want you to worry about that too much just yet. Okay. So let's continue on. I want you to note that we begin by creating an array called RET, return. And that's equal to an MT array and then, ultimately, that's what's going to be returned. Okay. Well, that's easy to understand. So next, we use a force statement, and what it's doing is it's filtering through the array that we passed. Go through the array only saving the items that passed the validator function. So in that way, it should almost be called jQuery. Filter because we go though this array and we run a test. And that test is going to return a bullion. True or false. If it returns true then we add that item to the new array, and if it returns false we do not. So ultimately, we will have this new array that we created and that's going to be populated with the results of our test. Okay? And then we just return. That new array. Okay, well that seems easy, so let's try this out. We have our jquery.grep, we have our arrow, we have our callback function. But how do we access the item within this callback function? Well, once again we come back to the source, and we see that here's where it calls it, and it will pass two parameters. The first one is going to be the item in the array. Elems[ i ] means. Whatever the value of that item is in the array. So, if we start with the first one, elems i, is going to refer to one, two. And then as the second parameter the index is passed through as well. The index of the array. And that'll be zero, one, two, three, etc. Alright, so let's go ahead and fill those. Val, index. So now if our goal is only return numbers that are greater than five. Okay, well that should be easy enough. We're simply going to return val is greater than five. So this test will be run for each one. We start with number one. And we say, is one greater than five? No it's not, so this returns false. And it's gonna do that for two, for three, for four. All of those are going to return false, and then in which case the items will not be added to this return array. Okay, but once we get to number six, it'll say is six greater than five? Yes, in which case we return true. And then, we take that return array, and we're going to push a new item onto that array, and that value will be equal to whatever the value is right here. So, in that case, six is greater than five. We return true, so ret.push six, and then it's going to do that for seven, eight, nine, and ten. All right, so let's try this, return val and let's get rid of this. Finally, I'm going to console.log array, and the final step is we need to store these results because we've run the grip method, it's executed, we have this response, but we haven't done anything with it, so let's store that and let's override the value of arr for now and then we lock that to the console. And there we go, six, seven, eight, nine, ten. So really, when you think of grep. Don't let that word confuse you. It's really not the same as the traditional sets. It's simply a filter. If true, then add it to the array. If false, then remove it from the array, or the response. So, let's take a look at that third parameter. We had that right here. Inverse. Or invert. What's going on there? Well we know that by default it's set to undefined. We come back, we get the same thing. But what jQuery is doing right here is it's casting that to a bullion. Because nothing is passed in by default,. That will be equal to undefined. And then it's getting the boolean for undefined. Because undefined is a false e value, inverse will equal false. But if we pass true or really any string that's not empty, in that case inverse will be equal to true. So then we filter through this array. We get the results of our test. Which is that callback function that's going to be true or false. And then we compare that. So we say if inverse is true, does true not equal the results of our test? Well let's say our test returns true. Does true not equal true? False. And in that case we push the item into the array. So, all that we are doing here is flipping the result. We'll change this to true, and now what you'll see is we get the inverse. Rather than six, seven, eight, nine, ten. We'll get one, two, three, four, five. Reload. One, two, three, four, five. Now we can also do this on objects. So let's consider another example. We're going to have an array, and that will be an array of objects. And each object is going to contain maybe personal information. We'll say first is Jeff, last is Way and that'll be fine for our object. So next, I will duplicate this. Several times. I'll do one for my wife. But I'll also do one for Jeffrey Smith, and one for John Doe. Ok so that will be fine. Now what our goal is here is to filter through this array of objects, and we want to filter it down to only those who are my family members. So you know what? Why don't we do one more. And in this case we'll do my father, Thomas Way. All right, so I want to filter this down to only people who have my last name, who are related to me. Well, jQuery.grep can easy be used for this. We'll override the value array or you can save it to a new one. And that'll equal to jQuery.grep. We're going to filter over this array and for each one, we'll execute a callback function. And now we're going to leave that third inverse parameter equal to false. Or it's undefined. Or we can just leave it because if we pass nothing to it, undefined is passed, and then when we cast it to a bullion, that is cast to false. So within here this callback accepts the object and the index. And all I wanna do is return true or false. So what is my test going to be? My test is going to be that obj.last equals my own last name. So we do myself. Does this object.last equal Way? Yes, true is returned. In which case, this new ret array we push that object to it. Okay. Then we do it for my wife, Allison, the same thing is true. But then we get to this one, obj.last equals Way false. So in that case, this never runs, we skip over it and that value is not added to the array that we eventually returned. And then we do the same thing for John Doe, and Thomas Way. So, let's console that log arr. Refresh. And we get these three objects containing all people that I am related to. Now granted this isn't some glamorous thing. But these are utility methods that you will use quite a bit. You can imagine, maybe you have a list of tweets. And you want to filter them down based upon whether they meet a certain criteria. Maybe if they contain foul language, you do not want them included and displayed on your website. Maybe you are a company ex, and you want to display Twitter mentions on your site, but you don't want to display the ones that are negative. So maybe you search through and find any Tweets that contain the word hate, and if that's the case, you return false and that way you could not displaying Tweets on your home page. That are bashing you. So, yeah. Well lots of different uses for jQuery.grep. Now if you have any questions, you can ask me on Twitter at Jeffrey_Way. Or alternatively, if you are a Tuts Plus Premium member, you can visit our forums. And ask your question for either myself or one of your fellow students. So the method is jQuery.grep. Make sure you learn it. Bye.