WEBVTT 00:00.580 --> 00:05.320 Okay, one, we got the job titles from all the different jobs on this page. 00:05.320 --> 00:07.480 Now, so far so good. 00:07.510 --> 00:10.960 But we also need to get the job description URLs. 00:10.960 --> 00:14.260 So remember that we wanted to get the URLs here. 00:14.260 --> 00:18.640 So when you click on the job listing, you get to a page. 00:18.640 --> 00:23.260 So this is the URLs we want to get for each of the job listings as well. 00:24.570 --> 00:26.100 So how do we do that? 00:26.100 --> 00:30.420 How can we select the job listing or the job listing URL? 00:30.450 --> 00:31.800 Well, it's quite simple. 00:32.070 --> 00:37.800 Again, just like when we are trying to find a title, we go into the Chrome developer tools. 00:37.800 --> 00:39.810 So press F12. 00:40.430 --> 00:44.060 And then we are going to use the inspect tool again. 00:44.060 --> 00:50.270 So I'm going to click on the inspect tool here, and then I'm going to click on the element that I think 00:50.270 --> 00:51.890 has the data that I want to get. 00:51.890 --> 00:55.580 In this case, it's the link to the job description. 00:56.750 --> 01:04.010 So I click on that and then again we can see the same element that we had before, which has the title 01:04.040 --> 01:04.820 up here. 01:04.880 --> 01:08.540 Let me just bring that down a little bit so you can see better. 01:08.780 --> 01:11.270 So we can see the title here. 01:11.390 --> 01:13.440 We got that before. 01:13.490 --> 01:15.630 Remember, it's the same element again. 01:15.650 --> 01:18.650 It is this a element because it's a link. 01:19.170 --> 01:23.090 And so the text inside this element is the title. 01:23.120 --> 01:27.500 We already got that from this result title class that we selected before. 01:27.500 --> 01:28.490 Remember this one? 01:28.490 --> 01:31.970 We did an each over the result title elements. 01:32.690 --> 01:34.880 But now we need to get a different attribute. 01:34.910 --> 01:39.740 We need to get the h href attribute instead of just the text content. 01:39.800 --> 01:48.470 So before we got the text content here using the query jQuery or cherry selector where we say dot text. 01:49.380 --> 01:53.160 And that's going to get us the content in here inside the element. 01:53.160 --> 01:55.060 But now we want to get the attribute. 01:55.080 --> 01:56.700 So how do you select the attribute? 01:56.700 --> 01:57.920 It's really simple. 01:57.930 --> 02:06.570 You just use the dot attr method and then you put in a string containing the attribute you want to get. 02:07.550 --> 02:16.490 So if I put in the string of data ID, I'm going to get back the attribute value of this data ID, or 02:16.490 --> 02:21.860 if I put in href, I'm going to get back the value of href attribute. 02:21.890 --> 02:29.000 So let me show you inside the console first inside this Chrome developer console how we can select all 02:29.000 --> 02:30.830 of the job description URLs. 02:31.280 --> 02:37.610 So we go ahead and use the famous dollar sign first and then put in the selector. 02:37.850 --> 02:44.460 And remember again, that is the same CSS selector we can use result title. 02:44.480 --> 02:46.250 We could also use this one. 02:46.250 --> 02:52.250 The I think it stands for header link, but let's just use the same one we used before. 02:53.090 --> 02:58.280 So remember the dot in front because it's because it's a CSS class. 02:58.520 --> 03:00.200 So result title. 03:01.200 --> 03:06.960 And then we can do a dot each loop for each of these listings we have on the page. 03:07.410 --> 03:15.330 So each and again, just like before, the first argument we get back from this, each loop is the index 03:15.330 --> 03:17.850 and the second one is the element itself. 03:18.410 --> 03:20.870 So index element. 03:21.230 --> 03:23.270 And then we do an arrow function. 03:24.880 --> 03:30.010 And then we can do a console log just to see if we're getting the right value so we can say console 03:30.010 --> 03:38.860 log and then we can use, again the jQuery selector to select the element or the elements attributes 03:38.860 --> 03:40.540 properties that we want to get. 03:40.570 --> 03:51.790 So dollar sign and then we pass in the current element in the loop and we say dot ECR and in here we 03:51.790 --> 04:01.990 can put in well I can put in data ID or I can put in RF So RF is where the link is inside of an element 04:01.990 --> 04:03.160 in HTML. 04:03.580 --> 04:09.250 And then we close it with the parentheses and let's try and see. 04:10.560 --> 04:16.320 So if I scroll up now, I can see all of the different links for the job descriptions. 04:18.550 --> 04:21.340 And up here is the code that we used. 04:21.940 --> 04:29.140 Now I can just copy and paste that into NodeJS just like before, and we should be able to get the job 04:29.140 --> 04:31.840 descriptions as well inside of NodeJS. 04:33.640 --> 04:35.110 So I'm going to copy this. 04:35.710 --> 04:36.760 Let's see. 04:37.740 --> 04:42.090 Copy that and then paste it inside the NodeJS section here. 04:43.680 --> 04:44.640 And. 04:45.700 --> 04:51.370 Now let's try and run it and see if we get all of the job URLs just for fun. 04:53.710 --> 05:01.270 Now it's going to open up the chromium browser and looks like the page has loaded now and then I can 05:01.270 --> 05:08.500 see all of the different job description URLs inside of my console and if I scroll up I can also see 05:08.500 --> 05:12.280 all of the different titles that we're also printing inside here. 05:13.920 --> 05:19.570 So cooling off, that's how we can select the job description URLs. 05:19.590 --> 05:26.370 In this case, we're using the Dot attribute method to select an attribute on the HTML element. 05:28.690 --> 05:31.630 So, so, so, so far so good. 05:31.660 --> 05:39.320 But we we are missing something because as you can see, we're just printing out different strings. 05:39.340 --> 05:46.000 But as I showed before in another section, we wanted to have sort of this data structure where we have 05:46.000 --> 05:54.250 different objects that contains different properties so that we later have it sort of in one place and 05:54.250 --> 05:55.720 we can put it up in MongoDB. 05:56.080 --> 06:01.480 So we can say that one object has a title, a URL. 06:01.480 --> 06:03.820 So it all fits together for one object. 06:03.910 --> 06:11.980 Right now, it's kind of hard to know if what you're URL fits for what title because we're doing a each 06:11.980 --> 06:14.260 loop for each element. 06:14.650 --> 06:20.590 Maybe one of the elements has an error and suddenly it makes a skip and you don't know which title fits 06:20.590 --> 06:21.610 what URL. 06:23.410 --> 06:29.170 But anyway, in the next section, I'm going to show you how we are going to solve this problem of either 06:29.170 --> 06:36.370 combining the arrays or making it just into one array at the output and how to make an object as the 06:36.370 --> 06:36.980 output. 06:37.000 --> 06:40.420 So see you in the next section where I'm going to show you this.