WEBVTT 00:00.580 --> 00:03.520 So now we got the HTML with Axios. 00:03.520 --> 00:09.670 But how do we actually extract some of the data from the site, for example, like these job titles 00:09.670 --> 00:10.630 we have here. 00:11.730 --> 00:14.400 Well, that's what we're going to be looking at in this section. 00:14.400 --> 00:19.260 We're going to find out what is the CSS selectors of these job titles. 00:19.740 --> 00:24.480 To do that, we can right click on the element that we are interested in. 00:24.480 --> 00:29.400 So if you go here and right click and select inspect. 00:29.670 --> 00:36.480 Inside of Google Chrome on the element we want to get and scrape, we are then going to see the developer 00:36.480 --> 00:43.470 tools on the side here, and we see the HTML where the element we right clicked on is. 00:43.470 --> 00:46.080 So we can see the title of the job here. 00:46.500 --> 00:53.790 And what is of interest is of to us is how can we build a CSS selector to select this element. 00:54.600 --> 01:01.620 Well, we can see that the the element, the A element with the title is inside the div class, or a 01:01.620 --> 01:04.560 div element with a class of title plop. 01:04.560 --> 01:11.340 So we could perhaps use this to select all of the titles inside of this website. 01:12.250 --> 01:19.870 If we go inside of the console on the tab over here and we try and type in a dollar sign. 01:20.490 --> 01:22.050 And then put in. 01:22.660 --> 01:24.310 Dot title plot. 01:24.310 --> 01:31.060 Because it's a class, we are going to use the dot in front and then let's put in text content. 01:31.800 --> 01:36.030 And as you can see, it does return the title of the first job. 01:36.030 --> 01:39.270 So that's a really good sign and very promising to us. 01:39.510 --> 01:43.530 Now this is using the native chrome selector. 01:43.530 --> 01:46.830 It's not actually the jQuery selector. 01:47.530 --> 01:55.150 And just to be sure, it would probably be a good idea for us to inject jQuery into this website and 01:55.150 --> 01:58.900 then use the jQuery, uh, selector instead. 01:59.940 --> 02:08.160 So to do that, I'm just going to go up here and select inject into page on my jQuery injector plugin 02:08.160 --> 02:09.810 I have inside of Chrome. 02:09.810 --> 02:16.380 If you don't have this plugin already, just Google, jQuery, injector, Chrome, and pretty much the 02:16.380 --> 02:19.140 first result you get is the right one. 02:19.140 --> 02:20.430 Mine looks like this. 02:20.430 --> 02:23.490 It has 25 ratings, 10,000 users. 02:23.730 --> 02:25.620 This is the one I use. 02:25.620 --> 02:30.630 I'm also going to leave a link for it in the, uh, lecture assets. 02:31.640 --> 02:38.900 Now let's get back to the site here, and let's inject the jQuery with the jQuery injector plugin. 02:39.730 --> 02:41.470 Inject into page. 02:42.640 --> 02:45.280 And now let's try it with jQuery instead. 02:45.280 --> 02:46.480 So we do the same. 02:46.480 --> 02:54.700 Exactly, exactly the same thing basically here or almost except for we just say text and call the function 02:54.700 --> 02:55.930 of text here. 02:56.430 --> 03:01.380 So then we get all of the titles in one big string here. 03:01.380 --> 03:03.870 And so that's very promising. 03:03.870 --> 03:07.860 And that means that we can use this selector to get all of the job titles. 03:09.000 --> 03:14.220 Now obviously we just get like one big string right? 03:14.220 --> 03:14.970 Right here. 03:14.970 --> 03:17.340 We want to print it one by one. 03:17.340 --> 03:20.280 Well how to print the job titles one by one. 03:20.280 --> 03:22.860 That's what we're going to be looking at in the next section. 03:22.860 --> 03:27.330 And we're also going to be starting to look at how to put this into NodeJS.