1 00:00:02,180 --> 00:00:03,750 So let's make sure we can, 2 00:00:03,750 --> 00:00:06,280 pre-populate this drop down field by 3 00:00:06,280 --> 00:00:08,193 querying our author data. 4 00:00:09,040 --> 00:00:12,090 And for this, I'm going to go to the blog JS file 5 00:00:12,090 --> 00:00:13,660 here in their routes folder, 6 00:00:13,660 --> 00:00:16,560 which actually defines all the routes we have 7 00:00:16,560 --> 00:00:18,930 for this application here. 8 00:00:18,930 --> 00:00:21,676 And at the moment I just redirect or render different 9 00:00:21,676 --> 00:00:25,873 templates here. It's really not too complex at the moment. 10 00:00:27,810 --> 00:00:29,980 Now this here, this page 11 00:00:29,980 --> 00:00:31,880 is actually rendered by this 12 00:00:31,880 --> 00:00:34,473 get route for new post here. 13 00:00:35,470 --> 00:00:38,160 and therefore it's here in this get route where I want 14 00:00:38,160 --> 00:00:40,290 to get my author data 15 00:00:40,290 --> 00:00:42,470 so that I can pass this data to the 16 00:00:42,470 --> 00:00:45,260 template so that I can use it in the template 17 00:00:45,260 --> 00:00:47,903 to pre-populate this dropdown field. 18 00:00:48,980 --> 00:00:51,990 Therefore, inside of this route definition, 19 00:00:51,990 --> 00:00:55,800 I want to reach out to my database 20 00:00:56,720 --> 00:01:00,041 and for that, we of course want to import this 21 00:01:00,041 --> 00:01:04,959 DB file we prepared by going up one level 22 00:01:04,959 --> 00:01:06,370 out of the routes folder 23 00:01:06,370 --> 00:01:08,720 into our root project folder, 24 00:01:08,720 --> 00:01:10,520 and then to the data folder. 25 00:01:10,520 --> 00:01:13,470 And there, the database js file. 26 00:01:13,470 --> 00:01:14,903 We import it like this, 27 00:01:16,200 --> 00:01:18,760 and we can store this in a db constant, 28 00:01:18,760 --> 00:01:20,730 or however you want to name it. 29 00:01:20,730 --> 00:01:24,397 And then here in this get route for a new post, 30 00:01:24,397 --> 00:01:27,161 we can call, getDb to get access to 31 00:01:27,161 --> 00:01:30,720 this database we connected to, 32 00:01:30,720 --> 00:01:32,250 and then on that, 33 00:01:32,250 --> 00:01:35,623 we can run various pieces of code. 34 00:01:36,530 --> 00:01:37,410 To be precise, 35 00:01:37,410 --> 00:01:39,410 we can now connect to a collection 36 00:01:39,410 --> 00:01:41,223 and then get the documents in there. 37 00:01:42,370 --> 00:01:44,300 Now in the shell, 38 00:01:44,300 --> 00:01:47,220 we used db dot authors find to get 39 00:01:47,220 --> 00:01:49,470 all the documents and the authors collection. 40 00:01:50,520 --> 00:01:52,070 In the note JS driver, 41 00:01:52,070 --> 00:01:53,560 it's a little bit different. 42 00:01:53,560 --> 00:01:56,180 There, we don't access dot authors here, 43 00:01:56,180 --> 00:02:00,670 instead there we call a collection method that exists 44 00:02:00,670 --> 00:02:02,570 on this database object, 45 00:02:02,570 --> 00:02:04,730 and we passed the name of the collection 46 00:02:04,730 --> 00:02:07,660 we want to talk to as a string parameter 47 00:02:07,660 --> 00:02:09,793 value 2 collection like this. 48 00:02:10,750 --> 00:02:14,451 That's how we establish access to that author's 49 00:02:14,451 --> 00:02:17,803 collection in our Mongo DB database. 50 00:02:19,200 --> 00:02:22,490 Next, this then actually will allow us 51 00:02:22,490 --> 00:02:25,730 to run the same commands we know from the shell. 52 00:02:25,730 --> 00:02:27,920 Like for example, find. 53 00:02:27,920 --> 00:02:29,561 And as you learn find, like this, 54 00:02:29,561 --> 00:02:32,750 without any parameter values will give us all 55 00:02:32,750 --> 00:02:35,730 the documents in this collection. 56 00:02:35,730 --> 00:02:37,703 Which is exactly what I want here. 57 00:02:39,020 --> 00:02:41,753 Therefore, like this, we'll get all the documents 58 00:02:41,753 --> 00:02:45,644 and find here will actually return a promise 59 00:02:45,644 --> 00:02:48,760 because just like establishing a connection 60 00:02:48,760 --> 00:02:50,580 to the database was a task that 61 00:02:50,580 --> 00:02:52,420 could take a little bit longer, 62 00:02:52,420 --> 00:02:54,110 querying for all documents, 63 00:02:54,110 --> 00:02:56,640 of course also takes a little bit longer. 64 00:02:56,640 --> 00:03:00,134 They afraid will actually return a promise. 65 00:03:00,134 --> 00:03:02,950 That's how it's built by the Mongo DB team. And hence, 66 00:03:02,950 --> 00:03:04,410 we can use await here, 67 00:03:04,410 --> 00:03:06,720 since I already have the async 68 00:03:06,720 --> 00:03:09,560 keyword in front of this function, here. 69 00:03:09,560 --> 00:03:10,960 Hence using await here 70 00:03:10,960 --> 00:03:12,733 will work without problems. 71 00:03:14,330 --> 00:03:18,010 And then this will give us our documents, 72 00:03:18,010 --> 00:03:19,720 but actually not like this. 73 00:03:19,720 --> 00:03:22,320 Instead, it will give us a cursor 74 00:03:22,320 --> 00:03:24,620 pointing at our documents. 75 00:03:24,620 --> 00:03:26,510 This sounds very fancy. 76 00:03:26,510 --> 00:03:28,422 In the end, the cursor is a tool 77 00:03:28,422 --> 00:03:30,670 which you can use to move through 78 00:03:30,670 --> 00:03:34,360 the documents that were fetched step-by-step. 79 00:03:34,360 --> 00:03:36,400 That can be helpful, if you're fetching 80 00:03:36,400 --> 00:03:38,486 a large amount of documents, 81 00:03:38,486 --> 00:03:41,660 let's say hundreds or thousands of documents, 82 00:03:41,660 --> 00:03:43,930 and you don't want to use them all at once, 83 00:03:43,930 --> 00:03:46,873 but instead work with them in chunks. 84 00:03:47,770 --> 00:03:49,670 Here, of course, we're not going to fetch 85 00:03:49,670 --> 00:03:51,830 hundreds or thousands of authors, 86 00:03:51,830 --> 00:03:54,970 and therefore, instead of using that cursor, 87 00:03:54,970 --> 00:03:57,520 I want to get all my documents just like this. 88 00:03:57,520 --> 00:03:59,917 And we can do this by adding toArray here 89 00:04:01,879 --> 00:04:03,543 at the end of this operation. 90 00:04:04,900 --> 00:04:07,440 This is how we will get all the author 91 00:04:07,440 --> 00:04:09,630 documents from the authors collection 92 00:04:09,630 --> 00:04:11,793 as an array of data we can work with. 93 00:04:13,149 --> 00:04:13,982 And therefore of course, 94 00:04:13,982 --> 00:04:15,610 instead of just naming those documents, 95 00:04:15,610 --> 00:04:17,170 we can also named this authors 96 00:04:17,170 --> 00:04:19,533 since we know it will be an array of authors. 97 00:04:22,110 --> 00:04:24,610 And now before we do anything else, 98 00:04:24,610 --> 00:04:27,420 let's see if this works by just console logging 99 00:04:27,420 --> 00:04:28,650 authors here 100 00:04:29,540 --> 00:04:31,180 and saving everything, 101 00:04:31,180 --> 00:04:33,270 so we don't use them in the template yet. 102 00:04:33,270 --> 00:04:35,140 We just logged them here. 103 00:04:35,140 --> 00:04:39,430 And then let's reload this add a new post page. 104 00:04:39,430 --> 00:04:40,690 If you do that, 105 00:04:40,690 --> 00:04:44,080 this a route will execute an indeed here. 106 00:04:44,080 --> 00:04:46,010 This is our console log statement. 107 00:04:46,010 --> 00:04:48,498 We see that we do have this array 108 00:04:48,498 --> 00:04:50,510 of JavaScript object. 109 00:04:50,510 --> 00:04:53,803 So of these documents that were fetched from Mongo DB. 110 00:04:54,670 --> 00:04:57,190 So the Mongo DB driver, which we use here 111 00:04:57,190 --> 00:04:59,760 conveniently converts the data stored in 112 00:04:59,760 --> 00:05:04,600 the database, into JavaScript data types for us here. 113 00:05:04,600 --> 00:05:07,160 We get an array of JavaScript objects 114 00:05:07,160 --> 00:05:08,730 with key value pairs 115 00:05:08,730 --> 00:05:10,920 where we for example, have strings. 116 00:05:10,920 --> 00:05:13,873 So we don't need to do any data conversion on our own. 117 00:05:14,950 --> 00:05:16,320 And, therefore, since we see that 118 00:05:16,320 --> 00:05:18,630 we got those authors here, 119 00:05:18,630 --> 00:05:22,490 we can now pass authors as a key 120 00:05:22,490 --> 00:05:23,853 into our template. 121 00:05:25,210 --> 00:05:26,410 And as so often, 122 00:05:26,410 --> 00:05:28,350 I just want to emphasize that authors 123 00:05:28,350 --> 00:05:30,420 here, on the right side of the colon, 124 00:05:30,420 --> 00:05:33,090 refers to the authors here. 125 00:05:33,090 --> 00:05:36,023 So that's the kind of connection we got here. 126 00:05:40,240 --> 00:05:43,850 Whereas authors here is just an arbitrary key. 127 00:05:43,850 --> 00:05:45,590 You could use a different key, 128 00:05:45,590 --> 00:05:47,380 which we are going to use inside 129 00:05:47,380 --> 00:05:49,180 of this template to access 130 00:05:49,180 --> 00:05:51,743 that data and to work with that data there. 131 00:05:53,090 --> 00:05:55,200 And that's what we're going to do next. 132 00:05:55,200 --> 00:05:57,040 We can go to the views and then there 133 00:05:57,040 --> 00:06:00,060 to create posts EJS file to 134 00:06:00,060 --> 00:06:02,913 then work with our author data there. 135 00:06:04,350 --> 00:06:06,400 In here, in create post, 136 00:06:06,400 --> 00:06:08,490 I got this select drop-down, 137 00:06:08,490 --> 00:06:10,710 which is currently missing the options 138 00:06:10,710 --> 00:06:11,773 that it needs. 139 00:06:12,810 --> 00:06:14,890 Now, of course we add options like this, 140 00:06:14,890 --> 00:06:17,240 but I don't want to add the myself. 141 00:06:17,240 --> 00:06:19,070 Instead, I'd like to loop through 142 00:06:19,070 --> 00:06:21,620 all the authors I fetched from the database 143 00:06:21,620 --> 00:06:23,923 and then use that data there. 144 00:06:24,980 --> 00:06:27,360 Now, since I'm in an EJS template here, 145 00:06:27,360 --> 00:06:28,773 we can of course loop 146 00:06:28,773 --> 00:06:33,528 by adding the appropriate EJS text here, 147 00:06:33,528 --> 00:06:36,400 and create a four off loop 148 00:06:36,400 --> 00:06:39,330 where we loop through all the authors, 149 00:06:39,330 --> 00:06:41,280 and then add the opening curly brace. 150 00:06:41,280 --> 00:06:42,240 And here at the bottom, 151 00:06:42,240 --> 00:06:43,823 the closing curly brace. 152 00:06:45,020 --> 00:06:47,410 And authors here, is of course the 153 00:06:47,410 --> 00:06:50,100 key name I chose here, 154 00:06:50,100 --> 00:06:53,083 when defining data for the template. 155 00:06:54,450 --> 00:06:56,480 So here I'm looping for all the authors 156 00:06:56,480 --> 00:06:58,100 and with that, we can then create 157 00:06:58,100 --> 00:07:01,210 our options inside of that four loop, 158 00:07:01,210 --> 00:07:03,280 and between the option tags, 159 00:07:03,280 --> 00:07:06,630 I want to output the human readable author name. 160 00:07:06,630 --> 00:07:08,963 So here we can access author dot name. 161 00:07:09,850 --> 00:07:11,620 We see that in the logged data, 162 00:07:11,620 --> 00:07:13,423 that we've got a name field here. 163 00:07:14,660 --> 00:07:17,470 And for submitting data to the server, 164 00:07:17,470 --> 00:07:20,172 I also want to add a value attribute 165 00:07:20,172 --> 00:07:22,720 to every option, so that this will be 166 00:07:22,720 --> 00:07:25,350 the actual data that's submitted to the server, 167 00:07:25,350 --> 00:07:27,110 when the form is submitted. 168 00:07:27,110 --> 00:07:31,040 And there, I want to submit to the ID instead of the name. 169 00:07:31,040 --> 00:07:34,160 Since we theoretically could have two authors 170 00:07:34,160 --> 00:07:35,530 who are different persons, 171 00:07:35,530 --> 00:07:37,110 but have the same name, 172 00:07:37,110 --> 00:07:38,900 and then it would be great to have the ID 173 00:07:38,900 --> 00:07:41,493 as a unique identification criteria. 174 00:07:42,790 --> 00:07:47,740 So therefore here as a value for this attribute here for the 175 00:07:47,740 --> 00:07:49,790 value attributes, I want to output 176 00:07:49,790 --> 00:07:52,490 author dot underscore ID, 177 00:07:52,490 --> 00:07:55,750 to use that auto-generated ID here. 178 00:07:55,750 --> 00:07:58,563 If we save all of that, 179 00:07:58,563 --> 00:08:00,630 and we reload here, 180 00:08:00,630 --> 00:08:04,040 we have our dropdown of authors now. 181 00:08:04,040 --> 00:08:05,328 And that means that now, 182 00:08:05,328 --> 00:08:09,540 we can also use these authors in our template here 183 00:08:09,540 --> 00:08:11,803 to submit that data to the server. 184 00:08:12,770 --> 00:08:14,268 If you open the Dev tools here, by the way, 185 00:08:14,268 --> 00:08:16,080 and you go to the elements tab 186 00:08:16,080 --> 00:08:18,490 and you inspect that dropdown, 187 00:08:18,490 --> 00:08:20,820 you see that the option values 188 00:08:20,820 --> 00:08:22,740 are the different unique IDs 189 00:08:22,740 --> 00:08:24,560 for the authors here. 190 00:08:24,560 --> 00:08:25,393 They look very similar, 191 00:08:25,393 --> 00:08:27,883 but they have a different last character. 192 00:08:29,050 --> 00:08:30,490 So that's all the working. 193 00:08:30,490 --> 00:08:31,960 And now we can therefore work 194 00:08:31,960 --> 00:08:34,059 on inserting new blog posts 195 00:08:34,059 --> 00:08:36,830 because now we can make this form submittable 196 00:08:36,830 --> 00:08:39,070 and then use the data on our routes 197 00:08:39,070 --> 00:08:42,023 to submit and store the data to the database.