Now that you've managed to build searching, take a look at how you can sort and order the data with Vue.js
- [Instructor] It's time to start sorting our records, and so what I need to do is create another computed record just like we have an array that's going to keep track of the searched appointments, I need to create another one that's going to keep track of the filtered appointments. So, we're going to do that. Go ahead and put another few comments, here. This is going to go right here, so I need a comma there, and this one's going to be called filtered appointments.
And it's going to be an anonymous function, just like searched appointments, it's going to return something, and what we're going to return is a new array just like we did with searched appointments. This array is going to have the records sorted in whatever fashion we want. Now, we do want this to be based on our already searched appointments, just in case somebody has already started a search and they have a bunch of records, and now they want to sort those records in a certain way.
So, to do this, we're going to use another one of the functions available from lowdash, which begins with an underscore, and this function is called orderBy. It's really fantastic so, if you want more information about it, make sure you go to this page. As you can see, orderBy is going to take a collection. Collection can be an array or an object. And then it's going to expect one or two parameters. The first parameter is going to be how you want to sort these items, and then you include whether or not you want them to be in ascending or descending order.
You can see some examples right here. We've got this array of objects, which is pretty much the way that our data is structured, and then we are passing along some sort parameters in this first array. And then in this second one, we can pass it along either ascending or descending. We're going to do that with our searched appointments value, so we can use this searched appointments, then we're going to create another function here that does the work, and that function is going to use a temporary value called item that we're going to create inside this, I'm going to go through each one of those items, and I'm going to need a couple of variables so I need to keep track of a key which is going to indicate which field I want to sort by, so do I want to sort by pet name? Do you want to sort by the pet owner? Or the appointment date? And then filter key, we're going to convert that to lower case, just like we did before.
And because we're using the keyword this, inside a function that is inside another function, we need to do the same thing we did up here, which is bind this keyword to this internal function, so that it works properly. Otherwise, this is going to mean the function that is the parent, and it's not going to have the right value, and everything is not going to work. The second, or the last thing that we need to pass here, is whether or not we want this data to be in ascending or descending order, so we will use a new value called filterDirection.
We haven't created that yet, we will do so in just a minute, and let's go ahead and add a comment here. So this is pretty cool, I'm actually using the already computed search appointments record, here, and this new function, filteredApts, is going to combine the searched appointments, and make them filtered appointments. So we do need to create these two different variables, filterKey and filterDirection, we will do that up here, so in addition to search appointments, we need to have a filterKey, in here we can type in one of the fields.
So, I'm going to start by filtering the pet name, then next, I need to include a filter direction. You can either do ascending or descending. We will begin everything with sort of a normal ascending order for our array. So once we do this, let's go ahead and save and see what's happening with our arrays. I'm going to make this one bigger, inpsect... Go to view, here.
I'm going to be in the main application, so now we've got a couple of different computed records, here. We have the filtered appointments, and the searched appointments. We don't have anything on a search right now so this one still has four elements, and so does this one, but if you take a look at actually the order of these appointments, and unfortunately when you click on this, sometimes it goes all the way down here. Let's see if we can make this a little bigger, so we can see things a little bit more clearly.
So, you can see that although my current list has Spot at the very top, and then Goldie, and then Buffy, the filter appointments is actually beginning with Buffy because we're ordering by pet name in ascending order, so the B would be at the top. Now, it's showing us the wrong one, just like before. So, before I do that, let's see what happens if I sort of type something in here. So, let's type Spot. I should have two elements here, so in this one we have two records, first with Goldie, and then with Spot, which is correct 'cause this is filtered, and then search just gives us the elements in whatever order they were stored in.
So this is actually working pretty well, except that our display is not showing the filtered records, so we have to modify that, as well. Instead of sending the appointment list, the searched appointments, i'm going to send it the filtered appointments. So as soon as I do that, you'll see that the list updates, and this is actually one of the cool things about using Web Pack. Notice that it didn't refresh the entire page, it just hot swapped the components, and it updated the interface.
If I refresh this, you would actually see everything sort of reset. But as you're programming with Web Pack, you can actually make it change and have that change modify a specific component, which it will then hot swap on the fly, and leave the state of your application alone. So, although we have sorting ready, we need to make sure that we take care of this display right here. And we'll take care of that in the next video.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering