1 00:00:06,720 --> 00:00:07,860 In this video. 2 00:00:07,860 --> 00:00:14,610 Let's see how we can pass a data from a server and then display it inside the templates. 3 00:00:14,760 --> 00:00:15,210 All right. 4 00:00:15,210 --> 00:00:20,160 So let's try to create a different route for user. 5 00:00:20,190 --> 00:00:24,570 So let me copy this one and let me paste it here. 6 00:00:24,600 --> 00:00:29,880 And let me change this one to, let's say profile page, profile page. 7 00:00:29,880 --> 00:00:38,310 And let's go ahead and create a template for the profile page so we can copy this one and paste it as 8 00:00:38,310 --> 00:00:44,670 that and change the title to say profile dot edge template. 9 00:00:44,670 --> 00:00:50,820 And let's also remove the title here and say, is that welcome? 10 00:00:52,080 --> 00:00:53,160 Is that so? 11 00:00:53,190 --> 00:00:55,710 Let's go ahead and render the template. 12 00:00:55,710 --> 00:00:59,510 So here are going to be the profile template. 13 00:00:59,520 --> 00:01:05,250 So let me change the path to to profile, template or profile. 14 00:01:05,280 --> 00:01:10,110 So if I make use of our slash profile, let's see what we have. 15 00:01:10,110 --> 00:01:14,430 Indeed we have welcome and we have their nav link also. 16 00:01:14,430 --> 00:01:20,910 So let's say that we have logged in successfully and we have a user inside this particular route. 17 00:01:20,910 --> 00:01:22,320 How can we send it? 18 00:01:22,320 --> 00:01:32,820 So here, let's try to have a dummy user by saying user is equal to let's say John as that. 19 00:01:32,910 --> 00:01:41,940 So here we want to send this data into the profile page and then when I go into the page I will see 20 00:01:41,940 --> 00:01:45,390 work and then the name of the user. 21 00:01:45,510 --> 00:01:51,120 So how can we do it with express is pretty easy for the render method. 22 00:01:51,120 --> 00:01:54,090 The first command is a profile or the template. 23 00:01:54,090 --> 00:01:57,120 The next one is additional payload. 24 00:01:57,120 --> 00:02:00,390 So you bring comma and then the carry basis. 25 00:02:00,390 --> 00:02:04,320 So here we can send any data into the template. 26 00:02:04,320 --> 00:02:07,080 So let's send the user as that. 27 00:02:07,110 --> 00:02:07,560 All right. 28 00:02:07,560 --> 00:02:15,690 So when I save this one now on a template of the user, I have a property called user which represents 29 00:02:15,720 --> 00:02:16,320 John. 30 00:02:16,320 --> 00:02:22,020 So how can we have access of this user inside the profile template? 31 00:02:22,020 --> 00:02:28,290 Like we discussed before, to be able to inject data, we need to use the syntax. 32 00:02:28,290 --> 00:02:32,340 So now let me close this one and let me open the profile template. 33 00:02:32,340 --> 00:02:33,750 So here we go. 34 00:02:33,750 --> 00:02:42,060 So on a template we have a value or property called user because it is what we have sent from the server 35 00:02:42,090 --> 00:02:44,160 onto the template called user. 36 00:02:44,310 --> 00:02:51,930 So inside my template I would say work arm, angular bracket percentage sign and then here is going 37 00:02:51,930 --> 00:02:59,100 to be equal to and the name of the property which is user when I save it and refresh it. 38 00:02:59,130 --> 00:03:01,530 Hey, welcome, John. 39 00:03:01,530 --> 00:03:07,920 Now we're able to send a data from back end and display it inside our template. 40 00:03:07,920 --> 00:03:09,000 That is great. 41 00:03:09,000 --> 00:03:11,460 That is awesome and that is beautiful. 42 00:03:11,460 --> 00:03:13,470 So let me close this one now. 43 00:03:13,470 --> 00:03:15,240 I'm really happy to see this. 44 00:03:15,240 --> 00:03:17,850 We can also send an object. 45 00:03:17,850 --> 00:03:24,360 So here, let me change this one to let's say Daniel when I save it and then refresh it. 46 00:03:24,360 --> 00:03:25,140 You see that? 47 00:03:25,140 --> 00:03:27,420 I see Daniel meaning is dynamic. 48 00:03:27,420 --> 00:03:34,470 So assuming this data is from database, we are going to have it as that we can also send an object. 49 00:03:34,470 --> 00:03:39,120 So let's say that this time around let's provide object with this values. 50 00:03:39,270 --> 00:03:49,500 So here we can say that the name of the user is equal to Emmanuel and then let's provide the age is 51 00:03:49,500 --> 00:03:56,070 equal to 25 years old, and then let's say the city is equal to Kumasi. 52 00:03:57,240 --> 00:03:57,810 All right. 53 00:03:57,810 --> 00:03:58,830 With that. 54 00:03:58,830 --> 00:04:03,420 So now on a template, I have user object. 55 00:04:03,420 --> 00:04:10,950 So now let's save it and let's go to the profile and going to be forward slash the profile before saving 56 00:04:10,950 --> 00:04:11,280 it. 57 00:04:11,310 --> 00:04:13,410 What's going to be the result? 58 00:04:13,440 --> 00:04:15,960 Right, because now we are passing in an object. 59 00:04:15,960 --> 00:04:18,810 So let's see, we have object, object. 60 00:04:18,810 --> 00:04:22,800 So now let's take what we want inside a template. 61 00:04:22,800 --> 00:04:27,210 Now we have user dot name when I save it. 62 00:04:27,210 --> 00:04:28,350 Now check it out. 63 00:04:28,350 --> 00:04:31,530 And this is what we have work on. 64 00:04:31,560 --> 00:04:36,120 Emmanuel and I can also display the image also. 65 00:04:36,240 --> 00:04:37,470 I'll copy this one. 66 00:04:37,470 --> 00:04:40,800 Let me have some h here and paste here. 67 00:04:40,800 --> 00:04:51,420 Let me change this one to h to here and let me say that your age is and then colon and here are going 68 00:04:51,420 --> 00:04:52,800 to be the age. 69 00:04:52,800 --> 00:05:03,090 So if I save it and now let's refresh it a your age is 25 and I can also display my city as that. 70 00:05:03,090 --> 00:05:03,840 Here we go. 71 00:05:03,840 --> 00:05:08,280 Let me add, the age are here and your city. 72 00:05:10,310 --> 00:05:13,790 Is he going to be de city? 73 00:05:14,000 --> 00:05:14,420 All right. 74 00:05:14,420 --> 00:05:17,900 So let's refresh it and here we go. 75 00:05:17,930 --> 00:05:20,390 I'm able to display that. 76 00:05:20,420 --> 00:05:21,740 That is awesome. 77 00:05:22,160 --> 00:05:22,730 All right. 78 00:05:22,730 --> 00:05:31,640 So what about if you are trying to send in, let's say, an array of posts, so let's go ahead and create 79 00:05:31,640 --> 00:05:33,970 a route for rendering posts. 80 00:05:33,980 --> 00:05:35,390 So here we go. 81 00:05:35,420 --> 00:05:37,190 I can copy this one. 82 00:05:37,190 --> 00:05:46,130 And now down here, I will change this one to post and let's remove this one and let's go ahead and 83 00:05:46,130 --> 00:05:48,380 create the template for post. 84 00:05:48,530 --> 00:05:54,400 I can copy the home template and change this one to post. 85 00:05:54,410 --> 00:05:57,110 So let's see how we can render our post list. 86 00:05:57,110 --> 00:05:59,930 So here are going to be post. 87 00:06:01,630 --> 00:06:02,260 List. 88 00:06:02,590 --> 00:06:03,220 All right. 89 00:06:03,220 --> 00:06:08,830 So let's go ahead and then render the post list going to be the post. 90 00:06:09,220 --> 00:06:09,640 All right. 91 00:06:09,640 --> 00:06:10,690 I get an error. 92 00:06:10,690 --> 00:06:12,870 Meaning user is not defined. 93 00:06:12,880 --> 00:06:19,840 You are going to see this kind of error a lot because on the template we are referencing to a user variable, 94 00:06:19,870 --> 00:06:27,610 but upon making requests to that endpoint, we are not making use of the user objects or parsing in 95 00:06:27,610 --> 00:06:28,540 the object. 96 00:06:28,540 --> 00:06:31,030 So let's see where the problem is. 97 00:06:31,240 --> 00:06:37,540 Where let's see which one the post here user is not defined. 98 00:06:37,810 --> 00:06:41,350 Well, let's check it out a server again and see. 99 00:06:42,120 --> 00:06:44,970 Or they say, oh, sorry, this is the point here. 100 00:06:45,090 --> 00:06:49,490 All right, so let's remove that one and let's remove the object here or so. 101 00:06:49,710 --> 00:06:52,200 And now let's refresh it. 102 00:06:52,200 --> 00:06:56,630 And I'm going to see where I see error also on the profile. 103 00:06:56,640 --> 00:07:01,470 Oh, I need to render the post dots or the post templates. 104 00:07:01,500 --> 00:07:01,980 All right. 105 00:07:01,980 --> 00:07:05,340 So let's refresh it and I have the post list. 106 00:07:05,430 --> 00:07:07,950 So how can we display a list of posts? 107 00:07:07,950 --> 00:07:12,610 So let's say that we have make a request database and we have these posts. 108 00:07:12,610 --> 00:07:16,950 So let's say post is equal to array with some object. 109 00:07:16,980 --> 00:07:25,650 The title here is going to be a HTML of my post and then the description of the post. 110 00:07:25,680 --> 00:07:29,820 You're going to be the best post. 111 00:07:30,640 --> 00:07:31,530 Adra. 112 00:07:32,260 --> 00:07:33,340 So let's copy this one. 113 00:07:33,340 --> 00:07:33,880 And paste. 114 00:07:33,880 --> 00:07:34,510 And paste. 115 00:07:34,540 --> 00:07:36,190 Three times or two times. 116 00:07:36,310 --> 00:07:40,070 So let's change this one to access the best push ever tune. 117 00:07:40,600 --> 00:07:43,750 And then it's not going to be Node.js. 118 00:07:47,040 --> 00:07:47,580 And this. 119 00:07:47,580 --> 00:07:49,800 I'm going to be posting a three. 120 00:07:50,250 --> 00:07:51,130 All right. 121 00:07:51,150 --> 00:07:53,010 Oh, it's out of scope. 122 00:07:54,960 --> 00:07:57,060 All right, you're going to be three. 123 00:07:57,100 --> 00:07:57,660 Okay. 124 00:07:57,660 --> 00:08:04,920 So next is I need to send this post to the templates, so let me collapse eight and have some room to 125 00:08:04,920 --> 00:08:05,460 work with. 126 00:08:05,460 --> 00:08:08,880 So here I'll pass in with some configuration. 127 00:08:08,880 --> 00:08:12,900 That's my objects and I'll pass in the post, which is six. 128 00:08:13,050 --> 00:08:16,860 If the property name and value are the same, I can choose to write one. 129 00:08:16,860 --> 00:08:21,120 So this one is equally as this as post. 130 00:08:21,120 --> 00:08:25,020 All right, so now let's remove this one and it is saved. 131 00:08:25,020 --> 00:08:30,630 So now on the template of the post, I can go ahead and render the post. 132 00:08:30,810 --> 00:08:36,750 So here post list here I can come here and let's see that render the post. 133 00:08:36,750 --> 00:08:41,039 If we see that we are making use of all the syntax when it comes to edges. 134 00:08:41,039 --> 00:08:43,650 So here how can we look through the data? 135 00:08:43,710 --> 00:08:47,910 So if you try to console log post, you'll be able to see in the console. 136 00:08:47,910 --> 00:08:49,110 So how can we do it? 137 00:08:49,230 --> 00:08:55,020 So to write JavaScript you bring an angle and then you're to percentage sign, and here you are going 138 00:08:55,020 --> 00:08:57,810 to make use of the variable called post. 139 00:08:58,320 --> 00:09:05,880 And on that we can use for each to loop through the post and here I'll pass in my callback function. 140 00:09:05,880 --> 00:09:09,540 I'm going to use arrow function this time around and here we go. 141 00:09:09,840 --> 00:09:17,460 So our expanded and I need to close the edges here as that and here also I need to close it as that 142 00:09:17,640 --> 00:09:19,410 as I've explained before. 143 00:09:19,680 --> 00:09:23,280 So inside here I have access to the individual post. 144 00:09:24,300 --> 00:09:25,410 Individual posts. 145 00:09:25,410 --> 00:09:30,810 I start and I will go ahead and then display that inside p tag here. 146 00:09:31,080 --> 00:09:36,420 And to inject dynamic data we are going to make use of the. 147 00:09:37,630 --> 00:09:43,000 Percentage signed and then the equal to and in the post and dot title. 148 00:09:43,030 --> 00:09:44,140 So let's save it. 149 00:09:44,140 --> 00:09:45,700 And now let's refresh it. 150 00:09:45,700 --> 00:09:48,760 And you can see that I have the post here. 151 00:09:49,060 --> 00:09:51,640 So what about the description? 152 00:09:51,640 --> 00:09:55,190 So I'll copy this one and paste it here and here. 153 00:09:55,210 --> 00:10:02,560 Going to be the description and let me add h are here to separate them, so let's save it. 154 00:10:02,560 --> 00:10:08,920 And you can see that I have my post list and I want to know how many posts were here. 155 00:10:09,010 --> 00:10:18,550 I can add here the number of posts using the edges and that equal to posts dot length. 156 00:10:19,780 --> 00:10:23,710 All right, so save it and let's refresh it. 157 00:10:23,710 --> 00:10:32,740 I get three if I remove some of the posts here to make it one here let's remove this one and now let's 158 00:10:32,740 --> 00:10:33,910 refresh it. 159 00:10:33,940 --> 00:10:35,410 You see, I get two. 160 00:10:35,410 --> 00:10:40,540 Now we are getting dynamic data from the back end. 161 00:10:40,930 --> 00:10:41,410 All right. 162 00:10:41,410 --> 00:10:45,640 The last condition I want to show you, what is important is to make condition. 163 00:10:45,820 --> 00:10:52,300 So let's say that if a user is not an admin, then we can display a text. 164 00:10:52,300 --> 00:10:57,190 Is that you are not an admin or you are an admin. 165 00:10:57,190 --> 00:11:00,730 So let's work on the home root here. 166 00:11:00,730 --> 00:11:11,740 So let's say we have a user which is equal to with some property is admin and let's make it as true 167 00:11:11,740 --> 00:11:12,910 by default. 168 00:11:13,030 --> 00:11:18,640 So now I can pass the user on to this template core user. 169 00:11:18,730 --> 00:11:26,080 So inside the home template, which is this one, let's go ahead and make some conditions. 170 00:11:26,080 --> 00:11:33,820 So here we are going to check if you are an admin, you will say you are an admin or you are not an 171 00:11:33,820 --> 00:11:38,500 admin because I want to show you how we can make conditions in rare cases. 172 00:11:38,500 --> 00:11:39,490 So here we go. 173 00:11:39,520 --> 00:11:46,120 We bring in the angle and my percentage sign and I see that and I'll close it here. 174 00:11:46,120 --> 00:11:54,070 I'll that so inside here I can make a condition and because of the template I have user dot is admin 175 00:11:54,430 --> 00:12:05,500 and if you are an admin then inside the statement I can say that here let me provide p tag and it says 176 00:12:05,500 --> 00:12:06,070 that. 177 00:12:07,870 --> 00:12:10,000 And here we go. 178 00:12:10,660 --> 00:12:12,490 Let me remove this one. 179 00:12:12,520 --> 00:12:13,390 Okay, close it. 180 00:12:13,400 --> 00:12:14,530 Here I start. 181 00:12:14,620 --> 00:12:18,170 And then else I need to close my edges here. 182 00:12:18,190 --> 00:12:19,480 I'll start. 183 00:12:19,540 --> 00:12:21,210 And down here to. 184 00:12:21,220 --> 00:12:23,680 I need to close it as that. 185 00:12:23,770 --> 00:12:24,510 Perfect. 186 00:12:24,520 --> 00:12:27,430 So now what about our statements? 187 00:12:27,460 --> 00:12:29,640 Errors here also. 188 00:12:29,650 --> 00:12:36,520 And I need to close my eyes also here and also here. 189 00:12:36,790 --> 00:12:40,550 So now I can copy this one and then place it here. 190 00:12:40,570 --> 00:12:42,910 And says that you are not. 191 00:12:43,600 --> 00:12:44,920 And add me. 192 00:12:44,950 --> 00:12:52,630 Then I can add even a button here says that apply for admin rule. 193 00:12:54,850 --> 00:12:55,860 Okay, save it. 194 00:12:55,870 --> 00:12:57,730 And now let's go to homepage. 195 00:12:58,060 --> 00:13:07,960 Now if you see that you are an admin, but if I change the value here to force save it and now let's 196 00:13:07,960 --> 00:13:08,810 refresh it. 197 00:13:08,830 --> 00:13:10,630 You are not an admin. 198 00:13:10,630 --> 00:13:12,670 Apply for admin rule. 199 00:13:12,790 --> 00:13:14,180 That is it, guys. 200 00:13:14,200 --> 00:13:20,050 So now that you have all the tools needed, now it's time for us to build our first project. 201 00:13:20,050 --> 00:13:24,610 Remember the API we developed by writing onto the file? 202 00:13:24,640 --> 00:13:32,320 We are going to take that data and display it where we can also update, delete and make use of operation. 203 00:13:32,320 --> 00:13:38,050 And then when you get back to MongoDB or database, then we are going to replace the files with the 204 00:13:38,050 --> 00:13:39,790 real MongoDB data.