1 00:00:02,050 --> 00:00:02,883 And with that, 2 00:00:02,883 --> 00:00:06,700 we can now again send our HTTP request through JavaScript. 3 00:00:06,700 --> 00:00:08,940 For this we again, use the fetch function 4 00:00:08,940 --> 00:00:11,630 and we now, again, need to construct the path 5 00:00:11,630 --> 00:00:14,410 to which we wanna send this request. 6 00:00:14,410 --> 00:00:15,810 If we have a look at our routes, 7 00:00:15,810 --> 00:00:20,250 we see that it's this post route that we wanna reach. 8 00:00:20,250 --> 00:00:22,970 So the path should be /posts/ 9 00:00:22,970 --> 00:00:27,023 then the concrete id of the post and then /comments. 10 00:00:28,220 --> 00:00:30,270 So the same path as up here, 11 00:00:30,270 --> 00:00:33,163 but now it should be a post instead of a get request. 12 00:00:34,300 --> 00:00:37,750 So what we can do actually is we can use this path, 13 00:00:37,750 --> 00:00:42,750 which we constructed earlier and copy this down there, here, 14 00:00:42,760 --> 00:00:43,833 and use that. 15 00:00:45,660 --> 00:00:48,750 And again, construct our postId here, 16 00:00:48,750 --> 00:00:50,290 copy this code, 17 00:00:50,290 --> 00:00:52,653 and also add this year to save comment. 18 00:00:53,600 --> 00:00:55,200 Now, to get the postId, 19 00:00:55,200 --> 00:00:57,290 we can actually still reach out 20 00:00:57,290 --> 00:00:59,570 to the load comments button element, 21 00:00:59,570 --> 00:01:01,460 but alternatively, 22 00:01:01,460 --> 00:01:04,854 we can also add that postId to another element 23 00:01:04,854 --> 00:01:07,670 for example, to the form itself. 24 00:01:07,670 --> 00:01:10,468 Here, we could also add data-postid 25 00:01:10,468 --> 00:01:13,301 and also set this = post._id. 26 00:01:14,620 --> 00:01:16,780 So that we have the id of the post 27 00:01:16,780 --> 00:01:20,593 for which we wanna add comments directly on the form. 28 00:01:21,570 --> 00:01:24,800 And then we could use this dataset here 29 00:01:24,800 --> 00:01:26,610 in the comments.js file 30 00:01:26,610 --> 00:01:28,950 and use the commentsFormElement.dataset.postid 31 00:01:32,930 --> 00:01:35,200 to get the post ID. 32 00:01:35,200 --> 00:01:37,403 And then this would send a request here. 33 00:01:38,490 --> 00:01:41,620 However, now sending a request like this 34 00:01:41,620 --> 00:01:43,630 is not enough anymore. 35 00:01:43,630 --> 00:01:45,030 Before this was great 36 00:01:45,030 --> 00:01:47,710 because fetch by default sends a get request 37 00:01:47,710 --> 00:01:50,050 and that is what I did want to do here 38 00:01:50,050 --> 00:01:52,970 in fetch comments for a post. 39 00:01:52,970 --> 00:01:56,270 But now I wanna send a post request instead. 40 00:01:56,270 --> 00:02:00,500 And even though the name fetch doesn't imply it, 41 00:02:00,500 --> 00:02:04,720 the fetch function cannot just be used for fetching data, 42 00:02:04,720 --> 00:02:08,410 but actually for sending any kind of HTTP request, 43 00:02:08,410 --> 00:02:10,393 including post requests. 44 00:02:11,340 --> 00:02:15,310 All you have to do to switch from I get to a post request 45 00:02:15,310 --> 00:02:18,590 is you have to add a second parameter value 46 00:02:18,590 --> 00:02:21,550 to the fetch function after the URL. 47 00:02:21,550 --> 00:02:24,070 And that second value is an object 48 00:02:24,070 --> 00:02:27,370 in which you can now set different properties. 49 00:02:27,370 --> 00:02:28,670 Different properties 50 00:02:28,670 --> 00:02:30,930 the fetch function we'll be looking for 51 00:02:30,930 --> 00:02:33,453 to configure to fetch functions behavior. 52 00:02:34,410 --> 00:02:37,360 For example, you can set a method property, 53 00:02:37,360 --> 00:02:39,080 and this has to be named method 54 00:02:39,080 --> 00:02:43,990 because browser site JavaScript will look for this key 55 00:02:43,990 --> 00:02:46,730 when the fetch function executes. 56 00:02:46,730 --> 00:02:48,830 And by default, this is set to get 57 00:02:48,830 --> 00:02:51,170 so to a string saying, get, 58 00:02:51,170 --> 00:02:53,010 but you can also set it to post, 59 00:02:53,010 --> 00:02:55,950 to instead send up post request. 60 00:02:55,950 --> 00:02:57,550 And that's what I wanna do here. 61 00:02:58,610 --> 00:03:01,530 Now, a post request then also needs the data 62 00:03:01,530 --> 00:03:03,410 that should be sent with it. 63 00:03:03,410 --> 00:03:05,920 And before we didn't have to worry about that 64 00:03:05,920 --> 00:03:10,550 because the browser sent post requests automatically for us. 65 00:03:10,550 --> 00:03:13,060 Now that we are writing our own code, 66 00:03:13,060 --> 00:03:14,890 we also have to add our own data 67 00:03:14,890 --> 00:03:17,200 to the outgoing request here. 68 00:03:17,200 --> 00:03:19,680 And we do this with another field here 69 00:03:19,680 --> 00:03:22,000 and that's the body field. 70 00:03:22,000 --> 00:03:24,913 Here we set the body of the outgoing request. 71 00:03:25,820 --> 00:03:29,640 And that should now be again, data in the JSON format. 72 00:03:29,640 --> 00:03:31,150 Because as mentioned before, 73 00:03:31,150 --> 00:03:34,900 that is the common data format for exchanging data 74 00:03:34,900 --> 00:03:36,513 when using Ajax, 75 00:03:37,710 --> 00:03:42,710 hence here, we wanna send a new JavaScript object 76 00:03:42,740 --> 00:03:44,563 converted to JSON. 77 00:03:45,600 --> 00:03:48,393 So we can create our comment here, for example, 78 00:03:49,360 --> 00:03:51,130 and include a title, 79 00:03:51,130 --> 00:03:53,120 which is our enteredTitle 80 00:03:53,120 --> 00:03:56,320 and the text, which is our enteredText. 81 00:03:56,320 --> 00:03:59,960 And now I wanna convert this object to JSON. 82 00:03:59,960 --> 00:04:03,060 For this, we can use the built in JSON object. 83 00:04:03,060 --> 00:04:06,390 We actually used it before on the server site 84 00:04:06,390 --> 00:04:08,430 in earlier course sections. 85 00:04:08,430 --> 00:04:11,400 It's also a way level here on the browser side, 86 00:04:11,400 --> 00:04:14,260 so in browser site JavaScript code 87 00:04:14,260 --> 00:04:17,850 and this JSON object, which is built into the browser 88 00:04:17,850 --> 00:04:20,390 has two utility methods, 89 00:04:20,390 --> 00:04:23,710 one method for parsing JSON content. 90 00:04:23,710 --> 00:04:27,750 So for converting JSON to raw JavaScript values 91 00:04:27,750 --> 00:04:30,720 and then stringify for doing the opposite. 92 00:04:30,720 --> 00:04:35,060 So for encoding JavaScript values into JSON. 93 00:04:35,060 --> 00:04:37,070 And that's what we need here 94 00:04:37,070 --> 00:04:38,950 because I want to convert my comment, 95 00:04:38,950 --> 00:04:43,640 JavaScript object into JSON, which looks very similar, 96 00:04:43,640 --> 00:04:46,410 but it's not quite the same as you learn before. 97 00:04:46,410 --> 00:04:47,950 You have all these double quotes 98 00:04:47,950 --> 00:04:50,420 and in the end, JSON is just text 99 00:04:50,420 --> 00:04:52,240 formatted in a certain way. 100 00:04:52,240 --> 00:04:55,500 This JavaScript object here is a special object, 101 00:04:55,500 --> 00:04:59,210 a special data type used in our JavaScript execution here. 102 00:04:59,210 --> 00:05:00,803 So it's a different thing. 103 00:05:02,300 --> 00:05:04,080 Now here we converted it. 104 00:05:04,080 --> 00:05:07,060 And now with we configured this request 105 00:05:07,060 --> 00:05:09,233 to actually be a post request. 106 00:05:10,750 --> 00:05:13,920 Now we do send this to our server 107 00:05:13,920 --> 00:05:16,903 and there we now wanna handle this incoming data. 108 00:05:17,900 --> 00:05:19,920 That means that in blockchain.js 109 00:05:19,920 --> 00:05:21,830 so in our server side routes, 110 00:05:21,830 --> 00:05:24,693 we now also wanna work on this post route again. 111 00:05:25,920 --> 00:05:30,140 Up to this point, this post route extracts some data 112 00:05:30,140 --> 00:05:35,070 from the incoming request and from the URL puff, 113 00:05:35,070 --> 00:05:39,063 and then adds a new comment in our MongoDB collection. 114 00:05:39,910 --> 00:05:42,580 And actually that code should still work, 115 00:05:42,580 --> 00:05:45,660 but there is a tiny gotcha here. 116 00:05:45,660 --> 00:05:49,440 When we extract data from the request body, 117 00:05:49,440 --> 00:05:51,690 we currently only do that 118 00:05:51,690 --> 00:05:56,060 if the request body is URL encoded. 119 00:05:56,060 --> 00:05:58,020 You might remember this term. 120 00:05:58,020 --> 00:05:59,900 If you have a look at app.js 121 00:05:59,900 --> 00:06:02,230 where we register some middleware, 122 00:06:02,230 --> 00:06:05,250 we added this URL encoded middleware 123 00:06:05,250 --> 00:06:08,830 for parsing all incoming requests for data 124 00:06:08,830 --> 00:06:10,453 that might be attached to them. 125 00:06:11,480 --> 00:06:13,410 Well, this will work, 126 00:06:13,410 --> 00:06:17,330 but it only looks for data that is URL encoded, 127 00:06:17,330 --> 00:06:21,100 which is the encoding format if a form is submitted. 128 00:06:21,100 --> 00:06:23,070 That's not what is happening here, 129 00:06:23,070 --> 00:06:26,170 we are preventing that default after all, 130 00:06:26,170 --> 00:06:28,523 we are instead sending JSON data. 131 00:06:29,380 --> 00:06:32,313 Now, thankfully express has a built in middleware 132 00:06:32,313 --> 00:06:35,750 that will also parse JSON data though. 133 00:06:35,750 --> 00:06:38,860 All we have to do here is use another middleware 134 00:06:38,860 --> 00:06:41,830 in addition to the URL encoded middleware 135 00:06:41,830 --> 00:06:46,830 and that's express.json also executed as a function here. 136 00:06:48,700 --> 00:06:51,940 This will parse all incoming requests 137 00:06:51,940 --> 00:06:54,670 and see if they are in the JSON format. 138 00:06:54,670 --> 00:06:58,693 And if they are, it will then parse that JSON data for us. 139 00:06:59,540 --> 00:07:01,160 So by adding this middleware, 140 00:07:01,160 --> 00:07:03,683 we are able to handle incoming requests 141 00:07:03,683 --> 00:07:05,810 that were sent by the browser 142 00:07:05,810 --> 00:07:08,710 where a regular form was submitted 143 00:07:08,710 --> 00:07:11,400 and we're able to handle incoming requests 144 00:07:11,400 --> 00:07:13,780 that use the JSON format, 145 00:07:13,780 --> 00:07:15,190 which is to kind of format 146 00:07:15,190 --> 00:07:17,393 we're using for this request here now. 147 00:07:18,550 --> 00:07:23,550 And with that back in our block.js file in our routes here, 148 00:07:24,340 --> 00:07:28,040 this code here actually should still work 149 00:07:28,040 --> 00:07:30,210 because when we use this JSON middleware, 150 00:07:30,210 --> 00:07:32,750 we will still have a req body field 151 00:07:32,750 --> 00:07:36,360 that holds the parsed content off the incoming request. 152 00:07:36,360 --> 00:07:37,810 So this doesn't change. 153 00:07:37,810 --> 00:07:40,100 We just needed to add that middleware 154 00:07:40,100 --> 00:07:42,653 to parse the content in the first place. 155 00:07:44,000 --> 00:07:48,280 The only thing that has to change here now is the response. 156 00:07:48,280 --> 00:07:50,290 I no longer wanna redirect, 157 00:07:50,290 --> 00:07:54,400 instead I now want to send back some data once we're done. 158 00:07:54,400 --> 00:07:57,200 So I wanna send back some JSON data 159 00:07:57,200 --> 00:07:59,440 and here, of course, I'm not fetching any data, 160 00:07:59,440 --> 00:08:04,440 so I don't really need to, well send back any data 161 00:08:04,600 --> 00:08:06,640 that's coming from a database, 162 00:08:06,640 --> 00:08:08,890 but we could send back our object 163 00:08:08,890 --> 00:08:12,840 which has converted to JSON automatically by this method 164 00:08:12,840 --> 00:08:17,840 where we simply set a message to Comment added. 165 00:08:18,220 --> 00:08:20,780 It's up to you, which data you wanna send back. 166 00:08:20,780 --> 00:08:23,140 You could also send back an empty object 167 00:08:23,140 --> 00:08:26,083 to not send back any data at all. 168 00:08:26,920 --> 00:08:29,000 But you wanna send some response 169 00:08:29,000 --> 00:08:32,919 to signal that you're done and that the request was handled. 170 00:08:32,919 --> 00:08:35,580 And now back in comments.js, 171 00:08:35,580 --> 00:08:38,980 we can, of course, again, wait for this response. 172 00:08:38,980 --> 00:08:41,860 Though, actually we don't even have to do that 173 00:08:41,860 --> 00:08:45,580 if we're not really doing anything with the response, 174 00:08:45,580 --> 00:08:47,330 and we're not doing anything here 175 00:08:47,330 --> 00:08:50,630 because the response doesn't contain anything we need, 176 00:08:50,630 --> 00:08:53,580 we of course don't necessarily have to wait for it, 177 00:08:53,580 --> 00:08:55,850 we can just send this request 178 00:08:55,850 --> 00:08:58,903 and forget about it here on the front-end. 179 00:08:59,933 --> 00:09:02,563 The comment should still be added to the database. 180 00:09:03,840 --> 00:09:05,880 So therefore, long story short, 181 00:09:05,880 --> 00:09:10,500 if we save all our files with all these changes made 182 00:09:10,500 --> 00:09:15,500 and we reload this page here, if I add a new comment here, 183 00:09:17,247 --> 00:09:21,253 "Send via Ajax" and I click Save Comment, 184 00:09:22,090 --> 00:09:23,770 we don't get any feedback here. 185 00:09:23,770 --> 00:09:26,110 So that's something we might wanna change. 186 00:09:26,110 --> 00:09:29,900 But if I load my comments, I get it here 187 00:09:29,900 --> 00:09:32,980 though clearly something went wrong 188 00:09:32,980 --> 00:09:35,610 because I only see null null. 189 00:09:35,610 --> 00:09:38,120 So storing the data failed. 190 00:09:38,120 --> 00:09:42,280 Though he got no error here, so the server didn't crash. 191 00:09:42,280 --> 00:09:44,940 Still, something is not working. 192 00:09:44,940 --> 00:09:49,120 We can also confirm this if we manually use the Mongo shell 193 00:09:49,120 --> 00:09:51,580 to have a look at all the comments. 194 00:09:51,580 --> 00:09:53,870 What we see is that here, I got a comment, 195 00:09:53,870 --> 00:09:56,003 but the title and text is missing. 196 00:09:58,140 --> 00:10:00,280 So what's going on here? 197 00:10:00,280 --> 00:10:04,330 Well, actually one important step is missing still. 198 00:10:04,330 --> 00:10:07,920 We did add this middleware here in app.js 199 00:10:07,920 --> 00:10:09,983 to parse incoming JSON data. 200 00:10:10,870 --> 00:10:13,080 But how do these parsing middlewares 201 00:10:13,080 --> 00:10:14,763 work in the first place? 202 00:10:16,090 --> 00:10:19,460 They actually don't try to simply parse 203 00:10:19,460 --> 00:10:24,020 all incoming request bodies and see if it works or not. 204 00:10:24,020 --> 00:10:25,640 Instead, what they do is, 205 00:10:25,640 --> 00:10:29,430 they look at the headers off the incoming requests. 206 00:10:29,430 --> 00:10:32,970 So at some extra metadata, which is attached to them 207 00:10:32,970 --> 00:10:36,210 and that metadata should contain information 208 00:10:36,210 --> 00:10:39,410 about the encoding of the request body. 209 00:10:39,410 --> 00:10:42,800 And if the metadata says that it's URL encoded, 210 00:10:42,800 --> 00:10:44,910 this middleware will become active. 211 00:10:44,910 --> 00:10:48,120 If the metadata says that it's JSON encoded, 212 00:10:48,120 --> 00:10:50,193 this middleware will become active. 213 00:10:51,040 --> 00:10:54,250 If the metadata doesn't say either of the two things, 214 00:10:54,250 --> 00:10:55,580 no middleware. 215 00:10:55,580 --> 00:10:59,100 So none of these two middlewares will become active. 216 00:10:59,100 --> 00:11:01,820 And that's exactly what's happening here. 217 00:11:01,820 --> 00:11:06,230 We didn't set any metadata on this outgoing request 218 00:11:06,230 --> 00:11:09,220 and hence the body isn't actually being parsed 219 00:11:09,220 --> 00:11:10,743 on our backend code. 220 00:11:12,100 --> 00:11:15,370 For the requests sent automatically by the browser. 221 00:11:15,370 --> 00:11:17,680 For example, when a form is submitted, 222 00:11:17,680 --> 00:11:20,680 the browser did set that metadata for us. 223 00:11:20,680 --> 00:11:23,180 Here since we sent the request ourselves, 224 00:11:23,180 --> 00:11:25,860 we have to do that ourselves. 225 00:11:25,860 --> 00:11:28,160 And just to quickly see that 226 00:11:28,160 --> 00:11:31,470 you can go back to the front-end to the developer tools 227 00:11:31,470 --> 00:11:33,313 and there to the Network tab. 228 00:11:34,220 --> 00:11:38,500 And here, if you inspect this second to last request, 229 00:11:38,500 --> 00:11:41,580 which was this post request, 230 00:11:41,580 --> 00:11:45,800 you can see the headers that were attached to the request. 231 00:11:45,800 --> 00:11:48,340 So you can check the request headers. 232 00:11:48,340 --> 00:11:50,440 And in there, you'll see a bunch of metadata, 233 00:11:50,440 --> 00:11:52,520 which is added automatically. 234 00:11:52,520 --> 00:11:55,930 So that's we just metadata automatically added 235 00:11:55,930 --> 00:11:58,920 by the browser for this outgoing request. 236 00:11:58,920 --> 00:12:01,960 But since the browser didn't create the request, 237 00:12:01,960 --> 00:12:04,450 the browser did not add any metadata 238 00:12:04,450 --> 00:12:07,250 describing the kind of content we're sending 239 00:12:08,250 --> 00:12:11,630 and therefore that's something we need to do ourselves. 240 00:12:11,630 --> 00:12:15,880 Here in the front end code in comments.js, 241 00:12:15,880 --> 00:12:18,590 we add an extra piece of configuration 242 00:12:18,590 --> 00:12:22,803 to this fetch function and that's the headers property. 243 00:12:23,770 --> 00:12:26,100 We can set this to a JavaScript object 244 00:12:26,100 --> 00:12:30,040 to define some extra headers, some extra pieces of metadata 245 00:12:30,040 --> 00:12:32,883 that should be attached to the outgoing request. 246 00:12:33,840 --> 00:12:37,860 And this metadata always has a key value format. 247 00:12:37,860 --> 00:12:42,200 You have a header name and then a value for the header. 248 00:12:42,200 --> 00:12:45,250 And whilst you can add any headers of your choice, 249 00:12:45,250 --> 00:12:47,830 there are a bunch of predefined headers, 250 00:12:47,830 --> 00:12:50,010 which are commonly used. 251 00:12:50,010 --> 00:12:51,960 For example, here, what we need to set 252 00:12:51,960 --> 00:12:55,713 is the 'Content-Type' header written like this. 253 00:12:57,410 --> 00:13:00,920 I put it between single quotes because it contains a dash 254 00:13:00,920 --> 00:13:04,510 and without quotes, this would be an invalid property name 255 00:13:04,510 --> 00:13:06,290 here in JavaScript. 256 00:13:06,290 --> 00:13:07,993 So we need the quotes around it. 257 00:13:09,040 --> 00:13:11,080 'Content-Type' is a special header, 258 00:13:11,080 --> 00:13:14,940 which is exactly the header, the app.js file 259 00:13:14,940 --> 00:13:18,050 so these middlewares will look for, 260 00:13:18,050 --> 00:13:20,500 and it was missing thus far. 261 00:13:20,500 --> 00:13:23,060 So now we add it and now after a colon, 262 00:13:23,060 --> 00:13:26,380 we set the value for this 'Content-Type.' 263 00:13:26,380 --> 00:13:31,090 And here we should set this to application/json. 264 00:13:31,090 --> 00:13:33,060 That's a reserved identifier 265 00:13:33,060 --> 00:13:37,680 for a saying that we add JSON data to this request. 266 00:13:37,680 --> 00:13:40,660 So this line here, this header being added 267 00:13:40,660 --> 00:13:44,993 says that this request carries some JSON data. 268 00:13:46,520 --> 00:13:48,820 So now to check this, 269 00:13:48,820 --> 00:13:51,580 let's go back to the Mongo shell quickly 270 00:13:51,580 --> 00:13:54,770 and actually delete this comment here 271 00:13:54,770 --> 00:13:59,673 by executing db.comments.deleteOne 272 00:14:01,050 --> 00:14:02,880 and then I wanna look for the comment 273 00:14:02,880 --> 00:14:07,880 where the id is equal to ObjectId and then this comment. 274 00:14:09,260 --> 00:14:14,260 So now this comment which was broken was deleted. 275 00:14:16,070 --> 00:14:18,783 If we now reload our post page here, 276 00:14:19,760 --> 00:14:24,710 if I add Another comment, another test Sent via Ajax, 277 00:14:25,750 --> 00:14:29,480 and I then load my comments, now the data is here 278 00:14:30,380 --> 00:14:33,540 because now it's stored in the database. 279 00:14:33,540 --> 00:14:36,600 As you can see, if I, again, get all my comments, 280 00:14:36,600 --> 00:14:40,080 because now it was parsed successfully on the backend 281 00:14:40,080 --> 00:14:42,200 because we told our server, 282 00:14:42,200 --> 00:14:45,660 which kind of data was attached to this incoming request 283 00:14:45,660 --> 00:14:48,400 by adding this extra piece of metadata, 284 00:14:48,400 --> 00:14:51,453 this extra header to this outgoing request. 285 00:14:52,450 --> 00:14:55,180 And therefore you can tell it's a bit more worth, 286 00:14:55,180 --> 00:14:57,760 but it's also in the end not too difficult 287 00:14:57,760 --> 00:15:01,040 to send a post request to the server. 288 00:15:01,040 --> 00:15:04,630 And now we are again sending a request behind the scenes 289 00:15:04,630 --> 00:15:06,400 without reloading the page 290 00:15:06,400 --> 00:15:08,300 and we can then handle it on the server 291 00:15:08,300 --> 00:15:10,820 and sent back a response. 292 00:15:10,820 --> 00:15:12,470 Now we're not doing anything 293 00:15:12,470 --> 00:15:14,490 when we get to this response here, 294 00:15:14,490 --> 00:15:17,360 but sending the request works. 295 00:15:17,360 --> 00:15:20,390 So let's now have a look at different options we have 296 00:15:20,390 --> 00:15:22,200 for using the response 297 00:15:22,200 --> 00:15:25,480 and maybe improving the overall user experience 298 00:15:25,480 --> 00:15:26,663 which we have here.