0 1 00:00:00,390 --> 00:00:00,690 All right. 1 2 00:00:00,690 --> 00:00:03,710 So here comes the answer for challenge 13. 2 3 00:00:04,740 --> 00:00:10,350 We don't need to change anything inside our app.js because we're already passing over this posts 3 4 00:00:10,360 --> 00:00:13,130 array to be dealt with inside our home. 4 5 00:00:13,140 --> 00:00:14,270 ejs. 5 6 00:00:14,280 --> 00:00:17,460 So this is where we're going to create our FOR loop and log 6 7 00:00:17,490 --> 00:00:20,940 each of the titles inside our posts array. 7 8 00:00:21,390 --> 00:00:25,380 Whenever you're writing code inside an EJS file 8 9 00:00:25,380 --> 00:00:31,020 I recommend to start writing the Javascript code without these little scriptlet tags because they make 9 10 00:00:31,020 --> 00:00:32,870 everything look a lot more cluttered and 10 11 00:00:32,880 --> 00:00:36,750 it's difficult to see what's going on when you're just trying to write your code. 11 12 00:00:36,900 --> 00:00:40,280 The basic FOR loop looks something like this. 12 13 00:00:40,290 --> 00:00:44,330 We start off with a var called i that starts at zero 13 14 00:00:44,670 --> 00:00:49,140 and it increases by one until the upper bound that we define. 14 15 00:00:49,140 --> 00:00:54,760 Then we can use that i to tap into each element inside our array. 15 16 00:00:55,350 --> 00:00:57,370 So let's write our FOR loop here. 16 17 00:00:57,630 --> 00:00:58,230 We'll write 17 18 00:00:58,230 --> 00:01:01,830 for var i = 0 18 19 00:01:01,830 --> 00:01:08,480 so this is our starting point, i is less than the upper bound and the upper bound 19 20 00:01:08,480 --> 00:01:12,710 in our case is the length of this post array. 20 21 00:01:12,780 --> 00:01:16,860 So the number of items are currently inside our posts array 21 22 00:01:17,010 --> 00:01:25,460 so we'll say posts.length. And the final thing will be i++ so that we increase by 1 each 22 23 00:01:25,460 --> 00:01:33,060 time. Inside our FOR loop, we're simply going to console log the titles of each of our posts. 23 24 00:01:33,200 --> 00:01:36,970 So all we need to do is console.log 24 25 00:01:37,310 --> 00:01:44,790 and the thing we're going to log is posts at index i. 25 26 00:01:44,970 --> 00:01:48,390 So this is how we tap into each element inside posts. 26 27 00:01:48,390 --> 00:01:52,220 We use the square brackets and we tell it which one we want to access. 27 28 00:01:52,290 --> 00: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 29 00:01:59,520 --> 00:02:05,600 until it gets to our upper bound which is the total number of posts inside the array. 29 30 00:02:05,930 --> 00:02:07,210 Posts at index 30 31 00:02:07,230 --> 00:02:16,200 i.title because remember the posts array contains post object and each object has a key of title 31 32 00:02:16,380 --> 00:02:22,020 and content that contains each of the post titles and bodies. Inside here 32 33 00:02:22,020 --> 00:02:23,850 this is the code that we need. 33 34 00:02:23,930 --> 00:02:31,240 And so now we're ready to cap everything off and go ahead and add all EJS scriptlet tags. 34 35 00:02:33,950 --> 00:02:39,650 And remember that each of these tags have to be added on every single line 35 36 00:02:39,650 --> 00: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 37 00:02:47,690 --> 00:02:48,370 out. 37 38 00:02:48,830 --> 00:02:53,840 So let's head over to compose and let's add a title 38 39 00:02:53,840 --> 00:02:58,220 Day 1. And now let's head back to compose again 39 40 00:02:58,440 --> 00:02:59,380 and let's add 40 41 00:02:59,390 --> 00:03:00,890 Day 2. 41 42 00:03:01,370 --> 00:03:06,570 And now we're on the home page so this is where our console.log is. 42 43 00:03:06,800 --> 00: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 44 00:03:14,210 --> 00: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 45 00:03:22,810 --> 00:03:26,440 then this might be a good time to have a look back in the course when 45 46 00:03:26,600 --> 00: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 47 00:03:33,910 --> 00:03:36,000 to remind us of how they work.