Join Joe Marini for an in-depth discussion in this video Sorting and grouping, part of Up and Running with Underscore.js.
Another very common scenario that you'll run into when you're working with data is the need to sort and group the data in various different ways. So let's take a look at how to use underscore to achieve those results. So here in this (INAUDIBLE) file, I've scrolled down to the sorting and grouping section. And I'm going to open up the sorting_start file right here. And over in the snippets, let's start by seeing how to sort data using underscore.
So we're going to copy these lines right here, so we'll copy that And by now the format of this file should look familiar to you. We have the, event listener that listens to the load event. And we have a DIV down here that contains the resulting data from the exercise. So we're going to use the underscore sort by method to sort the students by their grade. And in order to do that, we pass in the student's object, which contains the data. And we need to pass in a callback function, which will do the actual sorting.
And then after we do that, we're going to call the Underscore each function with this function right here, getStudentInfo. And getStudentInfo is basically going to populate the document with the results. It's going to put each one of the Pieces of information for each sorted student into the container divs inner HTML. No different than anything else we've been doing in the course so far. Alright. Back in the snippets, let's scroll up to sort students by grade. And we'll copy that function. And we'll paste it in here.
Okay. So now the sort-by function will use this callback. And you can see that we're returning item.grade, because we're sorting from freshmen up through seniors. So let's save, and let's open this in the browser. So in our exercise files folder, we're going to open up sorting, underscore, start, and you can see that the students are now sorted. So we've got all the guys in grade 9, all the people in grade 10, all grade 11, and all of grade 12.
So, that was a pretty easy way of sorting the students. And you can sort on pretty much any criteria you want. Let's go back to the code. So back here in the code, this function, sort students by grade, just needs to return information that underscore can use, in order to arrange the elements In a sorted order. So for example, if I wanted to sort on the length of students' names, or if I wanted to sort what their final scores were, I would simply need to use that piece of data in this function to tell underscore what property in the data object that we're sorting on. Alright.
Let's go back to the snippets. This time we're going to group the students together according to what school they go to. So, let's Copy these lines right here, and we'll Paste those below the sorting example. And then what we'll do, is we'll comment out the sorting example. Alright. And also back here in the snippets, we're going to copy this function called group students by school.
And we'll paste that below the, sorting function here. Alright. Here's how grouping works. There's a function in underscore called underscore.groupby. And it's pretty similar to the syntax that the sort function uses. Again, we pass in the data list right here, and then there's a callback function that tells underscore how the information should be grouped. And if you look at that function right here, you'll see that we're grouping by the item's school. So each one of these individual items that gets called in the callback is going to be an individual one of the records in the sample data.
Right? So here you can see some people go to Thoreau, some people go to Franklin. Now, we've only got 2 schools in this data set, so there's only going to be 2 groups. Let's go back to the code. So, we're telling Underscore use the school field to create the groups. Now when groupBy comes back, the result it's going to come back with, it's going to be an associative array, and the key for each item in that array is going to be the individual item that we grouped on. So, they'll be a group named Thoreau, they'll be a group named Franklin.
So what I'm doing here is I have a for loop. And I'm saying for i in grouped, which is the result. So, each one of these items in grouped will be the name of an individual school. And again, there's only 2 of them. So what we'll do then is we'll get the container div and then we'll have a variable here called school. And I'm going to build up an HTML string, that say students that go to, and then i. Remember, that's the this guy up here in the loop. This is the name of the school that the students go to.
And then, we'll put that into the container div. Again,remember, this is an associative array. So, for each one of the groups, we'll call the getStudentInfo function. And it will list all of the students in that particular group. So, again, as usual, it's probably easier just to see this in action. So what I'll do is I'll save this. Let's go back to the browser, okay, and let's refresh. And you can see here we now have students that go to Thoreau. And that's all these guys right here. And then if we scroll down, there are students that go to Franklin.
And that's these guys right here. So, using Underscore, we can easily separate records of information into individual groups. Alright, let's go back to the code. And let's go back to the snippets. Okay, the last thing that we're going to try out is Underscore's count by function. So we'll copy those lines right here, and we'll paste it in. Alright? And I'm just going to comment out the previous example, so that doesn't get in the way.
Alright. In this example we're going to use the count by function, and we're going to count the number of students in each grade. So this is similar to grouping. So what's going to happen is we're going to have a callback function here called count students by grade, and it's going to come back again with an associative array which we store in counts. And it will be arranged by the number of counts in each particular grade, okay. So here's what we're going to do. We're going to go scroll up here, back to the snippets.
We're going to Copy right here, countStudentsByGrade, and we're going to Paste that in. So again, this is a call back function and it will be called for each one of the elements in the students list. So, what were doing is checking to see if the grade is 9, 10, or 11 or 12. And then we're going to return a key word that underscore will use to create an individual group.
And then inside the container div, we're going to create a string that simply names the particular group of students. So I will either be freshmen, seniors, whatever. And then the particular count of that category. So let's save, back to the browser, refresh, and you can see that there are 6 seniors, 5 sophomores, 4 juniors, and 5 freshmen. So again, underscore makes working with data really easy. In this case, sorting and grouping become really painless, when you're using the built in features of the underscore library.
- 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