WEBVTT 00:06.860 --> 00:15.410 In this video you're going to write code which will sort the table rows by name so the user is gonna 00:15.410 --> 00:21.170 be able to click on the name header and then the items will be sorted by name. 00:21.570 --> 00:25.130 So in the final website this is how it's going to work. 00:25.640 --> 00:32.440 So you click the you know the names are sorted in ascending order. 00:32.500 --> 00:36.300 If I click again they are sorted in descending order. 00:36.580 --> 00:38.400 So let's go ahead and do this. 00:39.660 --> 00:48.000 So we're gonna need to create a javascript file which will link to this a simple file. 00:47.990 --> 00:58.770 So let's go to project files and create the jobs file writer going to call it scripts those JS and let's 00:58.770 --> 01:01.140 make sure that we link it properly. 01:01.140 --> 01:06.990 Just like we linked the CFS file so it's called the script of the end of the body 01:12.030 --> 01:19.590 and the source of the script is going to be project files for slice scripts but as 01:32.090 --> 01:33.010 so it starts. 01:33.050 --> 01:37.730 Let's just consult that log something to make sure it's correctly linked 01:41.970 --> 01:46.710 so if I refresh the page and then open the console 01:50.540 --> 01:52.440 then we can see Hello there. 01:52.880 --> 02:00.250 Now let's open or inspect the table body and try to understand what we really need to do. 02:00.290 --> 02:01.160 Exactly. 02:01.220 --> 02:11.480 So this is our table body inside the table body the of course the different table rows and you're gonna 02:11.510 --> 02:15.750 use the data name attribute to source these elements by name. 02:15.800 --> 02:17.190 Right. 02:17.240 --> 02:24.530 So table rows they are children of the table were the HMO element but we don't have a function which 02:24.530 --> 02:33.530 will sort children using a specific parameter or according to a specific parameter but we do know that 02:33.530 --> 02:36.560 in JavaScript we can source arrays. 02:36.560 --> 02:39.770 So if you take an array like this one 02:43.970 --> 02:57.590 and you use the method sort then you know that this is going to source your array. 02:57.630 --> 02:58.980 Here we go. 02:58.980 --> 03:03.660 So by default it's going to be sorted in ascending order. 03:03.720 --> 03:13.660 So we need to find a way to convert the contents of our table to an array and then we'll be able to 03:13.690 --> 03:18.950 sort the elements using the source method now. 03:18.950 --> 03:23.570 Did you know that you can pass a function to the source method. 03:23.570 --> 03:27.830 Well let's try the source method on an array of strings. 03:27.830 --> 03:28.400 For example 03:42.090 --> 03:43.130 let's see where we get 03:48.750 --> 03:53.460 so we manage to sort the strings in ascending order. 03:54.410 --> 03:58.610 Now what if instead of strings we've got objects. 03:58.650 --> 04:05.550 So for example let's say that we've got an object with a name 04:12.040 --> 04:13.180 and H 04:18.100 --> 04:49.040 So in this scenario how would we sort the array using the name for example. 04:49.060 --> 04:56.680 So here you can pass a function to the salt method and that function will actually decide how to compare 04:57.100 --> 04:59.140 two elements. 04:59.140 --> 05:06.100 So let's try a function which will take two elements a and b 05:13.750 --> 05:16.010 or person one in person to 05:20.970 --> 05:29.280 say here let's say thus we want to compare names so you can create a constant name one which is gonna 05:29.280 --> 05:30.510 be the name of person 1 05:33.900 --> 05:40.650 and then create another one name two which is gonna be the name of present to now if you want to ignore 05:40.680 --> 05:48.660 casing when doing your ordering you can just convert everything to uppercase before doing any sorting 05:50.580 --> 05:51.110 like that's 05:57.800 --> 06:00.510 and then you will decide what you're going to return. 06:00.540 --> 06:10.040 So if you return minus one then in your order person 1 is gonna be smaller than present two. 06:10.290 --> 06:15.930 If you return one then Person 1 is gonna be greater than person 2. 06:16.020 --> 06:21.320 If you return 0 then they're gonna be equal in your ordering. 06:21.690 --> 06:26.850 So let's write this in if statements. 06:26.850 --> 06:33.170 So if name one is smaller than name 2. 06:34.510 --> 06:38.250 Then you return minus 1 06:42.260 --> 06:43.100 and if 06:47.600 --> 06:53.140 name 1 is greater than name 2 you return 1. 06:53.510 --> 07:02.870 Otherwise if you got equal names you return 0. 07:03.360 --> 07:05.160 All right let's try this. 07:05.380 --> 07:08.560 And as a comment that's error that you get. 07:08.560 --> 07:11.820 That is just because we couldn't find this file. 07:12.070 --> 07:22.420 So let's try our code and you can see that we have just ordered the elements by name in the ascending 07:22.630 --> 07:24.120 order. 07:24.310 --> 07:40.250 Now instead of name if you try H. 07:40.400 --> 07:41.250 Let's change the age. 07:41.250 --> 07:43.970 So this puts 40 right there. 07:44.170 --> 07:55.480 Um 35 the So now if you try the code they are going to be sorted by age in the ascending order now wants 07:55.510 --> 08:01.080 if you want to order the elements in descending order not the ascending order. 08:01.270 --> 08:07.030 So all you need to do is after sourcing the array you just reverses 08:10.390 --> 08:11.270 like that. 08:11.380 --> 08:19.740 So if you try now they are gonna be sorted in descending order so hopefully the idea is becoming clear. 08:19.920 --> 08:24.290 So what we need to do is create an object 08:27.130 --> 08:33.890 where we're going to have several properties. 08:34.010 --> 08:38.880 So we're gonna have the name referring to the name of our file. 08:39.080 --> 08:40.580 We're going have the size 08:48.430 --> 08:49.450 last modified 08:56.120 --> 09:01.650 and finally we also need the ACMA content of the table CRO 09:14.320 --> 09:23.200 then once you sort these elements then you can build the arise contents for your table and change the 09:23.200 --> 09:29.930 ACMA contents of the table body let's call this time instead of last modified 09:32.680 --> 09:33.160 all right. 09:33.170 --> 09:44.920 So to create this objects we're going to need to loop through the table rows of our table body so loop 09:45.670 --> 09:49.750 through the children of table body. 09:50.230 --> 09:58.480 So to do that let's define a variable children where we gonna store the children of table body so we 09:58.480 --> 09:59.620 can use query here 10:06.370 --> 10:15.580 so selecting the elements using its tag table body and then accessing the children. 10:15.880 --> 10:20.540 If you check the type of the children variable 10:32.180 --> 10:35.330 you find that it is an object. 10:35.480 --> 10:40.160 If you check children dots for each 10:47.350 --> 10:53.260 you'll see this is undefined so we can't use for each with our variable children. 10:53.300 --> 10:57.560 We'll need to convert it to an array so that we can use for it. 10:57.610 --> 10:59.860 So to convert it to an array 11:07.200 --> 11:09.580 we are going to define an array. 11:09.990 --> 11:18.960 Children array there's gonna be an empty array and then we're gonna push the elements of children inside 11:19.020 --> 11:20.310 this correct. 11:20.310 --> 11:29.660 So you gonna use a for loop so it's tossing from index 0 and the condition is high. 11:29.700 --> 11:34.640 Less than the length of children. 11:34.960 --> 11:48.660 And every time we increment I by one and we are just pushing the items inside the final array. 11:48.760 --> 11:57.760 So now if you can so much log these new variable the array then let's see what we get 12:02.430 --> 12:03.700 there is an era. 12:03.750 --> 12:05.820 They're supposed to be a semicolon. 12:06.630 --> 12:07.460 Let's try again. 12:09.610 --> 12:16.200 So that's our array and we can see all the table rows. 12:18.400 --> 12:24.720 Therefore each element inside this array we're gonna need to build and objects just like that's where 12:24.720 --> 12:26.670 we're gonna store the name 12:29.550 --> 12:33.170 the size time and a schedule. 12:33.330 --> 12:37.930 So let's use for each on children array. 12:37.930 --> 12:46.510 So now we are building an array of objects which we would be able to sort later on. 12:46.530 --> 12:47.460 So for each 12:51.070 --> 12:52.840 we'll take a function. 12:52.840 --> 13:03.470 So we're going to take the elements of the array and then let's write some code is to check that we're 13:03.470 --> 13:04.730 doing things right. 13:04.730 --> 13:06.500 Let's just consult that log. 13:06.710 --> 13:10.160 The HMO contents of each elements 13:19.040 --> 13:19.380 right. 13:19.450 --> 13:22.840 So you can see in it a symbol of each table. 13:22.860 --> 13:25.070 Row. 13:25.280 --> 13:33.610 Now let's get the data name as abuse for example of table row so we can we can't see the attributes 13:33.620 --> 13:36.650 here because we've only seen the inner HMO. 13:36.800 --> 13:45.440 So destroy after a similarly said Here you go. 13:45.440 --> 13:48.250 Now you can see the attributes. 13:48.250 --> 13:50.240 So let's get one of those attributes. 13:50.330 --> 13:52.900 So console. 13:53.030 --> 14:01.080 Log elements gets us buttes this Troy data name 14:11.110 --> 14:12.890 I could see the name printed. 14:16.120 --> 14:19.080 Right now let's create our objects content 14:35.250 --> 14:38.750 and literally name is row details instead. 14:39.330 --> 14:48.990 So the name is going to be Vance. 14:49.100 --> 14:54.000 Sighs You're going to be gets us abuse data. 14:54.000 --> 15:03.340 Sighs Time is going to be gets us abuse data time. 15:03.550 --> 15:10.790 Samuel is going to be the outlier a symbol of our elements. 15:10.880 --> 15:17.090 Just make sure you use the outside she will here knows the inner HMO because you want to rebuild the 15:17.120 --> 15:18.610 whole table. 15:18.650 --> 15:22.070 Row not only it's a a shame. 15:23.030 --> 15:34.970 No we said that we are building an array of these objects so let's create that array so let's call it 15:35.840 --> 15:42.970 items there it's fine to use constants within array that is absolutely fine. 15:42.970 --> 15:45.490 It's like you do those within objects. 15:45.500 --> 15:49.000 So what you can't do us with a primitive type. 15:49.850 --> 15:54.500 So if we had a premium primitive type we'd have to use less. 15:54.860 --> 16:13.580 So once you create the arrow details you just push inside the items three push row details inside items. 16:13.630 --> 16:16.770 Now let's console the log items 16:25.490 --> 16:30.670 and see where we get to need the terminal at the moment 16:36.370 --> 16:38.400 so that's our array. 16:38.640 --> 16:42.040 And you can see the objects inside the array. 16:42.040 --> 16:45.390 And this is exactly what we need. 16:45.910 --> 16:49.920 Now the size and the time are supposed to be numbers. 16:50.020 --> 16:52.750 So let's convert these strings to numbers. 16:52.900 --> 16:55.510 So instead of that 16:58.490 --> 17:01.490 let's copy those inside pass integer 17:05.140 --> 17:07.650 and let's do the same thing with the data. 17:15.900 --> 17:25.620 And just a comment if you kept the data time in your code as a float then just make sure use postulates 17:26.590 --> 17:27.410 pass in. 17:27.440 --> 17:28.880 We'll still be fine. 17:28.920 --> 17:33.900 He's just gonna ignore whatever digits he of course in the decimal points. 17:34.020 --> 17:35.210 So let's try again 17:40.160 --> 17:40.510 now. 17:40.520 --> 17:47.750 These are numbers right now we we need to create a function which will take an array like this one and 17:47.750 --> 17:53.810 then sort the elements of the array by name in the ascending order. 17:53.810 --> 17:59.720 So let's call it sort name up. 17:59.740 --> 18:12.460 He's gonna take the items great or an array called items and we'll just sort the array for us 18:16.430 --> 18:17.600 there as you may have guessed. 18:17.610 --> 18:22.320 We cannot pass a function to the source method as we did before. 18:22.320 --> 18:23.490 In our example. 18:23.490 --> 18:28.110 So our lets you do that and let's check the solution in the next video.