Join Joe Marini for an in-depth discussion in this video Filtering collection content, part of Up and Running with Underscore.js.
- View Offline
One of the more common scenarios that you'll run into when you're working with sets of data is that you'll have to filter the data somehow. You'll want to have some way of taking a large set of data, and narrowing it down to a smaller set of more manageable records, and we're going to see how Underscore makes that simple in this example. So I've scrolled down here to my filtering data section in my example snippets, and I'm going to open up the filtering_start file.
And by now this should look familiar to you. I've included the _js file along with the sample data. And here's our, here's our event listener where we execute our test code. So over here in the example snippets, I'm going to scroll down and the first thing we're going to test is the _filter function. So I'm going to copy these two lines and paste them into the event listener. So, the _.filter function takes the set of data that you want to operate on, in this case the list of students.
And then it takes a callback function. And this callback function will help us narrow down the list by defining a set of criteria that each object must pass in order to be included in the resulting list that gets returned from filter. And we're going to put the result into this result variable right here. So let's go back to the snippets. We're going to copy these lines right here and we're going to paste them in. So, what we're going to do is define a function called getPassingStudents.
And getPassingStudents will take a look at the students array and return a list of the students that are not failing. ' Kay they have a score, a combined midterm and final score average that's greater than 65. So what we do is, we add the midterm score to the final score, we divide it by two and if the result is greater than 65 the student is passing. Let's go back to this snippets and scroll down here. And we'll use the each function. To populate the list in the document.
So, I'll copy these lines here and we'll paste it into the bottom of the event listener here. Alright. So, when result is populated by the filter function. We'll call each on the result, right here. And we'll define this inline function that does what some of the other functions you might have seen earlier in the course doing. We simply get the element that is the container, and we're going to put the student information into the inner HTML of this div right down here, so that we can see the results.
Alright, so let's save. And let's run this in the browser. I'm going to run this in Chrome. And you can see that these are all the students that have passing grades. In other words, their midterm and their final average together are greater than 65. Okay, so that's pretty good. Alright, let's go back to the code. Alright. Okay, let's go back to the snippets. Now what we're going to do is use the where function, and we're only going to select certain pieces of information from the students filter. Okay? So let's copy these two lines right here.
And it into the code here and will uncomment this line and will comment out the one using the filter. Right, so the where function, _where, takes a set of data and is only going to select items that match the properties defined in this object. Okay. So it's easier to see the results, and then I'll come back an explain it. And again, we'll just use the each function to populate the list. So let's go back to the browser. Alright? And let's refresh.
And you can see that now we have a much smaller list of students. We've got four students, all of them in grade ten. So, let's go back to code and see what happened. Here in the code, we are selecting only students that go to the school of Thoreau and are in the tenth grade, so this is another way to filter. You don't use a callback function here. We're using the where function to just pass in an object. That defines properties with the values that we want to have selected from the list of data.
In this case, the students list. Now we're going to use the reject function. The reject function is basically the opposite of the filter function. So let's paste this in, alright. We'll comment out the previous example and we'll un-comment this one. So whereas the filter function included elements, the reject function is going to get the failing students in this case because we're going to use the same function we did earlier, in this case get passing students.
However, in this case, because we're using the reject function, the result of get passing students is going to be looking at the opposite of the return value. Whereas we used filter to include elements in the list, we're going to use reject to keep elements out of the list. So this would get us all of the students that are failing. In other words, their scores, their midterm plus their final, the average, is going to be below 65. So that's who should be included in this list. So let's save and return to the browser and let's refresh and you can see that we now have a list of students that are just not cutting it.
Their scores are below 65. Alright, back to the code one more time. Okay. Let's try something a little bit different now. We're going to use the every and the some functions. The every function is used to ensure that all of a set of criteria have been met. And the some function checks to see if any of the elements. In other words, at least one. Passes a set of criteria. So, let's do this first. Let's go ahead and copy this. Copy these four lines, and we'll paste it in here. Paste.
And let's comment out line 21 right there. So what we're going to do, back in the snippets, scroll up. We're going to check this function right here. So let's copy that, paste it in, and I'll explain what we're doing. All right. What we're going to do is define a function called checkImprovement and given an individual student in the list, we're going to check to see if a student did better on their final exam than they did on their midterm.
Now in the case of every, right, the every function will return if all of the students improved on their final exam versus their midterm, okay. So it's going to loop over every element in students, and it's going to call checkimprovement on each one of them. In the case of the every function, it's going to call this for all of the elements in the array. And only return true if everybody passes this criteria. In the case of the some function, only one person. Only at least one, has to passs the criteria in here.
So in this case, the some function will return true, if at least one student did better on their final. Than they did on their midterm. So let's save, and let's go back to the browser, and let's refresh. 'Kay. So you can see the first result is false. And the first result is false because not every student did better on their final than they did on the midterm. Let's click OK, but the second result is true, because at least one student did better on their final than on their midterm.
So you can see, Underscore provides several different functions for filtering data and deriving smaller results sets from a large initial set of data.
- Understanding what Underscore.js is and does
- Installing Underscore.js
- Sorting, grouping, and filtering data sets
- Extracting information about arrays and objects
- Using templates to format data