WEBVTT 00:00.370 --> 00:06.670 Okay, so now we got the job title and the URL inside of this nice array of objects. 00:06.700 --> 00:09.130 Now we just need to add more properties to it. 00:09.130 --> 00:13.360 In the next one we need to add is the date that the job was posted. 00:13.750 --> 00:15.040 So how can we do that? 00:15.040 --> 00:17.470 Well, let's get on to it and I'll show you. 00:18.690 --> 00:24.240 First of all, let's open up chrome developer tools just like we've done before. 00:24.240 --> 00:25.740 So F12. 00:26.620 --> 00:30.460 And then I'm going to use the inspect element tool again. 00:30.460 --> 00:34.000 So it's pretty much the same procedure as before. 00:34.360 --> 00:37.510 And then I click on the date that I want to scrape. 00:37.510 --> 00:44.410 So I click on this one and then I see what element that we can scrape the data from. 00:45.700 --> 00:54.340 We can see here that it is a HTML time element and it has a class with the result date and a date time 00:54.340 --> 00:55.210 attribute. 00:55.630 --> 01:01.150 Now I want the data I'm scraping to be as accurate as possible. 01:01.150 --> 01:08.140 So instead of just using the text content with August 1st, we're going to use the date time attribute 01:08.140 --> 01:10.930 and create a JavaScript date object from that. 01:12.360 --> 01:17.100 Because it also contains the exact time the job was posted. 01:18.460 --> 01:23.230 But there is one issue or thing we need to watch out for. 01:23.530 --> 01:30.340 Before we were iterating through each of the result title and we made it into one loop here. 01:30.430 --> 01:36.370 But now this time class or time element has the class of result date. 01:36.910 --> 01:42.340 So either we need to make two loops and then we have this problem that maybe some data is corrupted 01:42.340 --> 01:45.370 and we're not going to have correct data. 01:46.540 --> 01:51.790 But how can we make it inside one loop and just go through each of these rows here? 01:52.120 --> 01:57.490 Well, we can see here that there's a parent element called result info. 01:57.730 --> 01:59.530 The P element here. 01:59.530 --> 02:07.990 And that's each row, basically, and that contains both the time class and the title and URL. 02:08.410 --> 02:14.290 So we can use this to select child elements from this parent element. 02:14.290 --> 02:19.750 And then we're sure that it is for one row and it fits for one row. 02:19.750 --> 02:21.430 And our data is correct. 02:23.220 --> 02:26.040 Let me show you how we do this in practice now. 02:26.170 --> 02:32.280 We're going to use the same math function, but instead of result title, we're mapping over. 02:32.280 --> 02:34.650 We're going to map over result info. 02:35.520 --> 02:39.360 So result info instead of result title. 02:39.840 --> 02:43.590 And then let's make the title element here. 02:43.590 --> 02:46.200 So we say const title element. 02:46.990 --> 02:50.130 And then we use the element selector here. 02:50.130 --> 02:52.370 And then we say dot find. 02:52.380 --> 02:56.790 So Dot Find is going to find child elements of an element. 02:56.850 --> 02:59.970 And then we say dot result title here. 03:01.760 --> 03:03.890 So now we have the title element. 03:04.650 --> 03:08.220 And then we can simply use the title element instead. 03:09.090 --> 03:13.230 So now we still have the title and the URL of the job posting. 03:13.890 --> 03:22.230 So using Dot find, we then go to this parent element and then we say inside this result info element. 03:22.260 --> 03:26.250 Find the children with the class result title. 03:26.850 --> 03:28.530 That's going to be this one. 03:28.980 --> 03:33.180 And then we can select the title and URL just like before. 03:33.810 --> 03:39.240 Now we can do the same thing with the time element so we can say const. 03:40.140 --> 03:41.610 Time element. 03:43.450 --> 03:51.430 And then use the same element selector and then say find and then dot result date. 03:52.000 --> 03:56.170 Because result date is the class of this time element we have here. 03:57.190 --> 04:00.940 And then we can make the date that the job was posted. 04:00.970 --> 04:04.720 So date posted equals. 04:04.810 --> 04:10.300 Then we use the time element selector here and say attribute. 04:10.810 --> 04:13.870 And remember we wanted to get the attribute date time. 04:15.290 --> 04:16.700 So date time. 04:17.780 --> 04:24.020 And then also I would like to have it into a JavaScript date object because it is, after all, a date 04:24.020 --> 04:24.980 that we are saving. 04:24.980 --> 04:26.420 The data is a date. 04:26.450 --> 04:32.090 So let's just make it explicit that it is a date we are messing around with here. 04:32.890 --> 04:38.020 So new date and then we pass in the string of date time to create this object. 04:38.590 --> 04:44.890 And then we can simply add the date posted as another property onto our objects we have here. 04:45.690 --> 04:51.130 Now let's try and run it and see how our results array look like. 04:53.670 --> 05:00.480 And now we can see it is printing out a nice little array with different objects that has a title, 05:00.600 --> 05:02.250 a URL and a date. 05:02.250 --> 05:03.420 It was posted. 05:04.150 --> 05:10.150 And we are pretty sure that it is correct data because we are going through each of these rows in the 05:10.150 --> 05:11.080 same loop. 05:12.260 --> 05:18.080 Now, in the next section, I'm going to show you how we can get the neighborhood that the job was posted 05:18.080 --> 05:18.770 in. 05:18.890 --> 05:25.790 So the neighborhood is the one that is in parenthesis sometimes at the job listings out here. 05:25.940 --> 05:30.080 And you can go ahead and try to do it yourself now. 05:30.320 --> 05:33.110 It's sort of the same thing we've been doing so far. 05:33.110 --> 05:36.580 So I recommend as an exercise that you try and do that now. 05:36.590 --> 05:40.430 And in the next section I'm going to show you how I will do it. 05:41.820 --> 05:43.920 So see you in the next section.