WEBVTT 00:00.500 --> 00:06.200 Okay, so here's a little bonus section where we're going to do where we make the code a little more 00:06.200 --> 00:12.460 dynamic in case you don't want to actually type out which column belongs to what property. 00:12.470 --> 00:19.640 So we simply get the property or the table header names from the table, and then we assign that to 00:19.640 --> 00:22.340 the corresponding property names. 00:22.430 --> 00:28.760 So regardless what kind of table we are throwing at the code, it's going to find out. 00:28.760 --> 00:32.840 Okay, the first table header is this name. 00:32.840 --> 00:34.630 In this case it's company. 00:34.640 --> 00:40.040 So it's going to assign the object property to be company name. 00:40.190 --> 00:47.090 So even if we are stuck with a table, we come to a table that has a table header that says name instead 00:47.090 --> 00:53.930 of company here, we're going to automatically get an object out that has a property that's called name 00:53.930 --> 00:57.260 and the corresponding table data cell value. 00:57.890 --> 01:01.920 So let's try and see how we can do that instead. 01:02.490 --> 01:08.370 So I'm going to make a new file here and I'm going to call it dynamic table scraping. 01:08.730 --> 01:16.650 JS And then I'm going to copy and paste the code we have from the other file inside and let's try and 01:16.650 --> 01:18.330 see how we can do this now. 01:18.570 --> 01:27.150 So on the first row we need to get the table header names from this one and assign them into a array 01:27.150 --> 01:30.420 so we can use them for the property names later on. 01:31.050 --> 01:33.630 So let's also make a new array here. 01:33.630 --> 01:36.720 Let's call it table headers. 01:38.700 --> 01:44.400 And then down here where we are at the first row with the table headers, we're going to do something 01:44.430 --> 01:47.490 a little more than just return true and skip the row. 01:47.880 --> 01:53.730 So we're going to go and say take all the table header elements. 01:53.730 --> 01:58.640 So we say element dot, find FX. 01:58.770 --> 02:01.830 So that's all the table header elements we get here. 02:01.830 --> 02:08.250 And then we're going to go through each of these table headers and get their text content or their name 02:08.250 --> 02:09.210 basically. 02:09.720 --> 02:13.420 So, um, so t h. 02:13.470 --> 02:15.510 S dot each. 02:16.710 --> 02:22.650 And then we have the index and the element, and then we have the arrow function here. 02:22.650 --> 02:32.490 And then let's say we do a so then we say table headers dot push and we simply push the this elements 02:32.490 --> 02:34.800 inside that loop we say. 02:35.960 --> 02:37.940 Basically the table header element. 02:38.060 --> 02:44.210 We take the text content of that one and push it onto the table headers array. 02:45.230 --> 02:45.920 Okay. 02:48.230 --> 02:55.400 And just for good measure, let's also make it lowercase because property names in JavaScript are usually 02:55.400 --> 02:57.920 camel case or. 02:58.820 --> 02:59.990 I just lowercase. 02:59.990 --> 03:02.060 I think they're just lowercase, actually. 03:02.300 --> 03:02.840 Okay. 03:02.840 --> 03:04.790 So two lowercase. 03:06.410 --> 03:12.380 Just to make sure we are following JavaScript object property naming convention. 03:12.800 --> 03:18.980 And so now we have our table headers inside the table headers array. 03:19.850 --> 03:24.440 Now we need to use them when we are assigning properties inside the loop. 03:25.400 --> 03:29.420 So we don't have a loop yet for all the cells, so we need to make that. 03:29.450 --> 03:32.030 So TDs dot each. 03:32.740 --> 03:35.320 And again, we have the index element. 03:36.580 --> 03:42.280 And so what we're going to do is we're going to use the index from the TDs because they are corresponding 03:42.310 --> 03:48.360 to the table headers and use that to assign a a object property. 03:48.370 --> 03:57.340 So first, before we have the loop, let's make a table row object up here, just an empty object and 03:57.340 --> 04:04.480 then we can say table row, and then we use the variable name or variable object property, which is 04:04.480 --> 04:08.620 the table headers array that we're using for this. 04:08.650 --> 04:17.980 And we use the, the, the index from this loop to access the table headers variable name. 04:17.980 --> 04:23.020 And then we use that to, to declare inside of our table row object. 04:23.980 --> 04:28.480 It sounds complicated, but maybe it's easier when you actually see it in action. 04:28.480 --> 04:37.310 So we make sure that the value of this object property corresponds to element dot text. 04:38.830 --> 04:46.380 Okay, so then we go through each of the TDs and create a object property based on the table, headers 04:46.390 --> 04:51.100 based on the index, which also corresponds to the ones in here. 04:51.100 --> 04:57.070 I mean, index zero of the TDs is the same as index zero of the table headers. 04:58.140 --> 05:00.690 Anyway, then we end up with that. 05:00.690 --> 05:03.120 And let's try to see. 05:05.400 --> 05:08.410 And now we can remove this because that was the hard coded way. 05:08.430 --> 05:15.450 Now we have a dynamic way of doing things, and then we can just say push table row instead. 05:16.560 --> 05:22.290 And now let's try and run this code and see if the output is exactly the same as before. 05:22.560 --> 05:24.090 So we can say. 05:24.120 --> 05:25.380 We can say. 05:26.080 --> 05:34.690 Node dynamic table scraping and indeed we can see it fits exactly what we had before. 05:34.690 --> 05:41.290 Except for that we have an empty object here at the first table row, and that's because we actually 05:41.290 --> 05:43.900 didn't skip this first table row. 05:43.900 --> 05:48.310 We just did this case where we do the table headers array. 05:48.490 --> 05:54.790 We also need to say return true so that we don't go through the rest of the code. 05:55.000 --> 06:04.360 So now if I say clear here and try to run it again, we can see that we get the data exactly as before, 06:04.360 --> 06:07.300 but without the empty object at the top. 06:08.890 --> 06:18.190 So now we can pretty much push this code and other tables that might have like 20 table headers or 20 06:18.220 --> 06:20.890 columns and we don't have to type out. 06:20.920 --> 06:21.820 Type it out. 06:21.850 --> 06:24.790 Hard coded inside of the code every time. 06:25.420 --> 06:31.240 So if you have a big table with lots of columns, then you can use this approach. 06:31.770 --> 06:40.060 Um, if the code is not as verbose or as readable, I would say as before, maybe where it's very concise 06:40.060 --> 06:46.940 saying that index zero is equal to company index one is equal to contact and so on. 06:46.960 --> 06:51.700 But this is a little more dynamic and you can throw more stuff at it, so to say. 06:52.420 --> 06:59.590 Anyway, I hope you enjoyed this and all of the code is available on GitHub also for you to see. 07:00.340 --> 07:03.590 So if you have any questions, let me know. 07:03.610 --> 07:05.740 So see you in the next section.