WEBVTT 00:05.740 --> 00:11.380 In this video you're going to finish code which will source your table rows by name. 00:11.680 --> 00:14.830 So hopefully you manage to finish this function. 00:15.160 --> 00:18.250 So let's copy code for from our example 00:31.050 --> 00:39.320 say instead of Person 1 in person 2 let's call these item one and item 2. 00:46.390 --> 00:48.100 I'm gonna keep name 1 and name 2. 00:49.940 --> 01:04.150 And we are checking the property name instead of each. 01:04.940 --> 01:08.450 Let's apply this function to our items array 01:11.820 --> 01:14.450 and let's consult the log items. 01:18.050 --> 01:19.330 Let's check the results. 01:23.150 --> 01:23.600 Here we go. 01:23.600 --> 01:25.130 So you can see that our elements 01:28.120 --> 01:32.090 have been ordered but this is not really the order we wanted. 01:32.120 --> 01:35.440 And that's because we've got some uppercase 01:38.070 --> 01:40.680 and some lowercase starting. 01:40.810 --> 01:45.760 So let's convert everything to uppercase 01:51.960 --> 01:55.830 to ignore uppercase and lowercase. 01:55.940 --> 01:56.700 So let's try again. 02:00.500 --> 02:02.090 I know that's better. 02:02.090 --> 02:08.080 It's a quick comment as you may have noticed the salt method is destructive. 02:08.080 --> 02:13.810 So this means that we changed the array itself by using the source method. 02:13.960 --> 02:18.260 So we didn't have to return a new array. 02:18.430 --> 02:24.640 Now you can also create another function which will source the array in the descending order. 02:25.240 --> 02:33.760 So let's call it sort name down which will take the array 02:38.000 --> 02:39.160 event sources. 02:39.170 --> 02:48.020 So a good way to do this is by sourcing the array in the ascending order first and then reversing the 02:48.020 --> 02:48.290 array 02:51.680 --> 02:58.320 and again we're going to use the reverse method which is also a destructive method meaning that is gonna 02:58.340 --> 03:04.340 change the original array so your array items you get is gonna be reversed and you don't have to return 03:04.340 --> 03:05.280 anything here. 03:05.390 --> 03:10.810 Now let's test our code by logging the items array 03:15.740 --> 03:23.450 and you can see that they are now sorted but they are still sorted in the ascending order because we 03:23.450 --> 03:28.930 haven't applied the function yet to array or two items. 03:28.930 --> 03:30.340 So let's try this 03:35.340 --> 03:36.600 and this looks better. 03:36.600 --> 03:40.690 So they also sit in the descending order all right. 03:40.700 --> 03:51.800 So now you will need to use this contents ordered contents to build your table body. 03:51.810 --> 03:58.570 So gonna change these in a a meal or the HMO contents of the table body using the order of contents. 03:58.640 --> 04:03.530 So to do that let's create a function. 04:03.530 --> 04:08.270 So uh we're going to fill the table body weight items. 04:08.390 --> 04:17.450 So this creates a function filled table body which will take the items array and will build the assemble 04:17.450 --> 04:18.050 contents 04:22.880 --> 04:24.420 table body. 04:24.470 --> 04:27.020 So this creates a variable contents 04:30.470 --> 04:35.280 so what you want is the same l property from each objects. 04:36.020 --> 04:48.130 So if you want you can try the map method to create a new array out of this one taking only the HMO 04:48.130 --> 04:49.480 contents. 04:49.480 --> 05:02.210 So for each element we're going to return the h the HMO property like that's for now let's just consult 05:02.240 --> 05:04.490 the other contents to see where you got 05:07.430 --> 05:08.600 this call our function 05:22.730 --> 05:27.560 I forgot to pass items inside the function and so let's try again. 05:29.490 --> 05:30.570 So here we go. 05:30.570 --> 05:34.170 So you can see that we've got a new array 05:39.380 --> 05:46.820 showing only the HMO content so to build the final contents all you need to do is join the elements 05:46.820 --> 05:48.060 of the array. 05:49.010 --> 06:00.680 So we're gonna add doing right that and the separator is going to be an empty string. 06:00.680 --> 06:05.700 We don't need any separator so let's try again. 06:08.900 --> 06:14.600 And this time we get the right content to fill the table. 06:14.600 --> 06:15.240 What. 06:16.350 --> 06:19.050 So let's change the HMO contents of 06:23.000 --> 06:23.570 the table. 06:23.570 --> 06:23.970 What. 06:24.380 --> 06:39.610 So it's Alexis using its tag and let's use the HMO method of January. 06:39.790 --> 06:45.390 You can see that we have ordered our elements in the descending order. 06:45.400 --> 06:54.060 Now the next step is add an event listener to the head of the table or the head is off the table so 06:54.070 --> 07:00.640 that if you click on a header you reorder your table rows. 07:00.760 --> 07:06.670 Now in order to do that you will need to know what status we are in at the moment. 07:06.700 --> 07:12.670 So if they are already ordered in the descending order then you want to switch to ascending. 07:12.700 --> 07:15.610 And if it's already in ascending you need to switch to descending. 07:16.330 --> 07:20.820 So you're gonna need to create an object where we to store the current status. 07:21.400 --> 07:26.290 So let's define those objects are the top of okayed 07:29.220 --> 07:29.640 so 07:32.520 --> 07:33.930 let's delete this code. 07:33.930 --> 07:37.290 We don't need this anymore and 07:40.080 --> 07:41.050 this creates a 07:45.420 --> 07:46.000 objects. 07:46.040 --> 07:46.410 Right. 07:46.970 --> 07:49.460 So we're gonna call it the order stages 07:52.190 --> 08:00.410 so let's call it source stages for example instead of order 08:03.490 --> 08:08.560 and here we're going to have these stages for the name 08:11.970 --> 08:12.810 the size 08:15.410 --> 08:20.260 and the last modified type 08:23.260 --> 08:26.350 so for now we are interested in the name 08:29.510 --> 08:32.110 we're gonna assume those are the beginning. 08:32.220 --> 08:33.390 There is no order. 08:33.390 --> 08:34.770 So we're gonna write none. 08:35.340 --> 08:42.520 So the possible values for example could be known up or down. 08:42.600 --> 08:53.170 So even though in most cases by default you will get the elements ordered by name at the beginning because 08:53.170 --> 09:02.620 the server when it takes or is gets you the different elements of a folder then by default you get the 09:03.610 --> 09:08.300 order in the ascending order or the items in the ascending order by name. 09:08.380 --> 09:11.110 Now we're going to assume that that's not the case. 09:11.140 --> 09:20.880 So at the beginning we will arrange the items or order them in ascending order by name. 09:20.890 --> 09:26.590 If you click for the first time then if you click again we're gonna be ordered or so said in the descending 09:26.590 --> 09:32.680 order so let's add our event listeners right then 09:38.400 --> 09:43.170 turn it starts with the name header so let's check the template and see 09:49.190 --> 09:53.310 the HMO contents of the name header. 09:53.310 --> 09:54.760 So here it is. 09:54.810 --> 10:03.510 So let's give it an I.D. name which we can use in the jobs cascade is do the same thing for the size 10:04.500 --> 10:08.350 and for the last modified call this one type 10:13.650 --> 10:16.230 so let's access the elements using its I.D. 10:25.060 --> 10:29.770 name and add event listener 10:33.770 --> 10:39.050 so the event is going to be click and our function 10:43.130 --> 10:46.100 he is going to be us following. 10:46.240 --> 11:01.110 So we're going to check the current status or the current sorts of stages for any so if it is 11:05.670 --> 11:07.510 known or down. 11:07.600 --> 11:16.000 We're going to sort in the ascending order and if it is up we're going to order or sorts in the descending 11:16.000 --> 11:29.600 order series go ahead and code this so if it is in these values so known or 11:34.280 --> 11:34.670 down 11:39.780 --> 11:42.410 then we're going to sort in ascending order. 11:46.490 --> 12:00.130 Otherwise if it is equal to up then we're going to source in the descending order so it is salt in the 12:00.130 --> 12:01.160 ascending order. 12:01.420 --> 12:09.040 We call the function sort name up applied to items 12:12.680 --> 12:14.680 and two sorts in the descending order. 12:14.950 --> 12:17.190 We call sort name down 12:24.020 --> 12:31.100 and after that you fill the table body using the items array. 12:31.170 --> 12:38.820 Now if you want to avoid having two functions for sorting you can create only one function sort name 12:40.020 --> 12:41.790 and then you can add a problem. 12:41.800 --> 12:51.320 So they're either up or down. 12:51.410 --> 12:53.490 This will make your code better structured. 12:53.750 --> 12:58.510 So let's go ahead and do this. 12:58.830 --> 13:01.950 We don't need to call those functions that stage 13:10.950 --> 13:17.700 so here instead of sort name up we're going to have source name taking two parameters 13:20.510 --> 13:21.760 let's call this one option 13:25.350 --> 13:34.590 by default we're going to sort up in the ascending order and if the option is set to down 13:37.430 --> 13:43.240 then we are going to reverse event and we can delete this one for no 13:47.320 --> 13:47.670 right. 13:48.100 --> 13:49.470 So let's test. 13:55.950 --> 14:01.570 So it is click on the name header so the beginning is going to be sorted 14:04.500 --> 14:11.980 so if the salt stages name is in one of these two values. 14:12.210 --> 14:12.780 So 14:15.550 --> 14:16.000 non 14:19.770 --> 14:20.560 or down 14:23.420 --> 14:29.500 and we can do this by using the includes method of arrays 14:36.790 --> 14:37.300 like this 14:43.980 --> 14:48.200 then we are going to sort in the ascending order. 14:50.970 --> 14:56.190 And if this is marching 14:59.130 --> 15:03.500 up then we're going to Salt's in the descending order 15:07.440 --> 15:09.220 so it is soars in ascending order. 15:10.830 --> 15:14.990 We're going to use sort name 15:19.410 --> 15:19.950 items 15:23.190 --> 15:32.570 in the descending source name down of items and once you saw to the items array then you need to fill 15:32.600 --> 15:36.130 the table body like that. 15:36.290 --> 15:38.240 So it is deletes these lines. 15:40.730 --> 15:41.970 We don't need them or the movements 15:49.740 --> 15:55.490 and also to simplify our code instead of having two functions for up and down. 15:55.600 --> 15:58.300 We can create only one function sword's name 16:02.430 --> 16:05.880 and then use up and down US promises in the. 16:05.880 --> 16:06.240 Function 16:16.290 --> 16:23.700 so this will become sort name which will take two promises this time so let's call the second parameter 16:24.030 --> 16:32.710 option so first we're going to sort the array in the ascending order by default. 16:33.120 --> 16:45.370 And then if the option is set to down then we're going to reverse the array at the end like that's 16:52.340 --> 16:55.690 now we are still missing something in this code. 16:55.730 --> 17:04.360 So if you order the elements by ascending order you need to change the source stages of any. 17:04.830 --> 17:10.980 And that's going to become up. 17:11.520 --> 17:17.520 Similarly if you sorts in the descending order then this should be reflected in the stages which is 17:17.600 --> 17:22.510 going to become down so let's just locate 17:25.710 --> 17:26.730 say the beginning. 17:26.730 --> 17:27.390 That's the 17:30.380 --> 17:31.340 sourcing we're getting. 17:31.340 --> 17:33.630 So this is at the moment non. 17:33.920 --> 17:34.670 If I click the 17:39.500 --> 17:41.960 it's now sorted in the descending order. 17:42.200 --> 17:42.950 If I click again 17:51.120 --> 17:53.190 I still source it in the descending order. 17:53.280 --> 17:54.960 So let's check what's going on. 17:54.960 --> 17:55.500 So 18:00.200 --> 18:05.010 so at the beginning the status is non meaningless. 18:05.020 --> 18:06.520 If we click on the header 18:11.980 --> 18:14.720 we should source in the ascending order. 18:14.760 --> 18:15.100 Right. 18:16.270 --> 18:19.450 For some reason we source it in the descending order instead. 18:19.480 --> 18:22.110 So the problem is right here in our code. 18:22.300 --> 18:28.450 Basically what's happening here is that in this scenario we source in the ascending order. 18:28.450 --> 18:34.410 Then we change the value of source status those name. 18:34.870 --> 18:43.450 And then when we move to this line of code this condition is verified because you have just changed 18:43.450 --> 18:44.320 that to up. 18:44.320 --> 18:49.510 So you have now allowed this code to run as well. 18:49.570 --> 18:53.920 So in all cases you're going to source in the descending order. 18:53.920 --> 18:55.330 So you're going to need to change this. 18:55.350 --> 18:58.270 It's okay this time and make sure that it works. 18:58.270 --> 19:03.730 So if I click on the name header then I can see that now they are sort of in the ascending order. 19:03.750 --> 19:05.230 I click again. 19:05.230 --> 19:07.110 They are now sorted in descending order. 19:07.150 --> 19:10.980 If I click again then it goes back to ascending. 19:11.150 --> 19:14.590 All right in next video we're going to add the up and down arrows.