WEBVTT 0 00:00.390 --> 00:00.690 All right. 1 00:00.690 --> 00:03.710 So here comes the answer for challenge 13. 2 00:04.740 --> 00:10.350 We don't need to change anything inside our app.js because we're already passing over this posts 3 00:10.360 --> 00:13.130 array to be dealt with inside our home. 4 00:13.140 --> 00:14.270 ejs. 5 00:14.280 --> 00:17.460 So this is where we're going to create our FOR loop and log 6 00:17.490 --> 00:20.940 each of the titles inside our posts array. 7 00:21.390 --> 00:25.380 Whenever you're writing code inside an EJS file 8 00:25.380 --> 00:31.020 I recommend to start writing the Javascript code without these little scriptlet tags because they make 9 00:31.020 --> 00:32.870 everything look a lot more cluttered and 10 00:32.880 --> 00:36.750 it's difficult to see what's going on when you're just trying to write your code. 11 00:36.900 --> 00:40.280 The basic FOR loop looks something like this. 12 00:40.290 --> 00:44.330 We start off with a var called i that starts at zero 13 00:44.670 --> 00:49.140 and it increases by one until the upper bound that we define. 14 00:49.140 --> 00:54.760 Then we can use that i to tap into each element inside our array. 15 00:55.350 --> 00:57.370 So let's write our FOR loop here. 16 00:57.630 --> 00:58.230 We'll write 17 00:58.230 --> 01:01.830 for var i = 0 18 01:01.830 --> 01:08.480 so this is our starting point, i is less than the upper bound and the upper bound 19 01:08.480 --> 01:12.710 in our case is the length of this post array. 20 01:12.780 --> 01:16.860 So the number of items are currently inside our posts array 21 01:17.010 --> 01:25.460 so we'll say posts.length. And the final thing will be i++ so that we increase by 1 each 22 01:25.460 --> 01:33.060 time. Inside our FOR loop, we're simply going to console log the titles of each of our posts. 23 01:33.200 --> 01:36.970 So all we need to do is console.log 24 01:37.310 --> 01:44.790 and the thing we're going to log is posts at index i. 25 01:44.970 --> 01:48.390 So this is how we tap into each element inside posts. 26 01:48.390 --> 01:52.220 We use the square brackets and we tell it which one we want to access. 27 01:52.290 --> 01:59.430 So i will start off being 0 and we'll grab the first item in our posts array and then i will increase 28 01:59.520 --> 02:05.600 until it gets to our upper bound which is the total number of posts inside the array. 29 02:05.930 --> 02:07.210 Posts at index 30 02:07.230 --> 02:16.200 i.title because remember the posts array contains post object and each object has a key of title 31 02:16.380 --> 02:22.020 and content that contains each of the post titles and bodies. Inside here 32 02:22.020 --> 02:23.850 this is the code that we need. 33 02:23.930 --> 02:31.240 And so now we're ready to cap everything off and go ahead and add all EJS scriptlet tags. 34 02:33.950 --> 02:39.650 And remember that each of these tags have to be added on every single line 35 02:39.650 --> 02:47.690 so even on the closing curly braces and any semicolons you've got. So let's hit save and let's try it 36 02:47.690 --> 02:48.370 out. 37 02:48.830 --> 02:53.840 So let's head over to compose and let's add a title 38 02:53.840 --> 02:58.220 Day 1. And now let's head back to compose again 39 02:58.440 --> 02:59.380 and let's add 40 02:59.390 --> 03:00.890 Day 2. 41 03:01.370 --> 03:06.570 And now we're on the home page so this is where our console.log is. 42 03:06.800 --> 03:13.790 And now you can see we're logging Day 1 then Day 2 both the titles without the rest of the array 43 03:14.210 --> 03:22.450 because we're looping through it and tapping into that title each time. If you need a refresher on FOR loops, 44 03:22.810 --> 03:26.440 then this might be a good time to have a look back in the course when 45 03:26.600 --> 03:33.910 we first introduced it or just to check out the MDN docs on FOR loops and to read up on that document 46 03:33.910 --> 03:36.000 to remind us of how they work.