WEBVTT 00:01.040 --> 00:06.080 So we have our database query, we have the database function, we have the handler and we have the 00:06.080 --> 00:13.460 root in the API and now we can go to our all dash sales page, go HTML file and actually query that 00:13.460 --> 00:15.160 and try to get Jason back from it. 00:15.680 --> 00:18.470 Now, the first thing I'm going to do is in the content section here. 00:18.500 --> 00:20.620 I need somewhere to display this information. 00:20.630 --> 00:27.590 So I'll put a table in here and I'll give it an idea of sales DASHTY and I'll give it some bootstrap 00:27.590 --> 00:28.120 classes. 00:28.130 --> 00:32.750 So class equals table and table dash straight, which is enough for right now. 00:33.260 --> 00:41.030 And I'll close my table tag before I forget to do so and I'll give it a head and a closing t head. 00:42.740 --> 00:49.370 And up here I'll put a row in and close the row and I'll put a few columns in here just enough to displacement 00:49.380 --> 00:59.960 information, so to say the transaction, and it'll be some kind of number and the customer to customer 01:00.230 --> 01:04.340 and closer to page and maybe I'll put the product in there. 01:05.600 --> 01:10.160 Even though we only have one, we might have more in the future and the amount of the sale 01:14.600 --> 01:15.020 like that. 01:15.980 --> 01:24.140 And then I'll come down here and put an empty t badia nothing inside at all and we'll populate that 01:24.140 --> 01:25.790 Tebaldi using JavaScript. 01:26.120 --> 01:33.050 OK, so that's a place where we have to store our result or to display our result then down here in 01:33.050 --> 01:38.330 the JavaScript section or script tagging script and a closing script tag. 01:38.930 --> 01:43.540 And I know that I'm going to have to pass my fetch statement, my token. 01:43.550 --> 01:46.220 So let's get the token let token equal. 01:46.220 --> 01:50.870 And this is in local storage, local storage 01:53.930 --> 01:56.280 doget get item and we call the token. 01:57.470 --> 02:04.550 So now I have my token and I'm also going to be putting results in Tebaldi, the Tebaldi of the sales 02:04.550 --> 02:04.910 table. 02:04.910 --> 02:06.200 So let's get a reference to that. 02:06.830 --> 02:08.870 Let Tebaldi equal. 02:11.310 --> 02:13.180 Document that get element by 02:16.050 --> 02:26.850 and I'm looking for sales Dasch table, and then I want get element by Tangney, get element by tag 02:27.030 --> 02:32.490 name and it's Tebaldi which I have to spell right or won't work. 02:33.060 --> 02:37.190 And it's the first occurrence of that, which is index zero. 02:37.200 --> 02:37.860 There's only one. 02:38.280 --> 02:41.960 But we have to put the zero in square brackets or it won't work. 02:43.740 --> 02:45.600 We're also going to have to have some request options. 02:45.600 --> 02:49.310 So const request options was where we're going to call. 02:49.500 --> 02:51.920 We're using this what we call fetch as usual. 02:52.230 --> 02:54.330 So opening and closing curly brackets. 02:55.230 --> 02:57.660 And I want a method and I made my post. 02:57.720 --> 03:05.580 So I'll put post in here and we want some headers headers and that is a JavaScript object. 03:05.580 --> 03:07.920 So let's give it its curly brackets. 03:08.340 --> 03:14.850 And the first thing is, except as usual, we're going to accept applications last, Jason. 03:16.320 --> 03:17.310 And the content type, 03:24.000 --> 03:25.710 which is also application Jason 03:29.460 --> 03:33.570 and our authorization header authorization. 03:35.370 --> 03:43.110 And that's going to be equal to bearer B, a, r, e, r space and then append to that after the space 03:43.440 --> 03:44.020 or token. 03:45.150 --> 03:47.060 OK, so that gives us our request options. 03:47.850 --> 03:57.090 Now let's call that API route using fetch fetch and as usual, we get the first part of our You Will 03:57.120 --> 04:07.410 Eurail from DOT API, which is passed to every template in the site API admin, slash all dash sales 04:09.240 --> 04:12.330 and then close my quotes and then request options. 04:14.670 --> 04:20.550 And then we get then response becomes response, thought Jason. 04:23.490 --> 04:31.350 And then we have our final then clot's then and we'll just say function data which should be in the 04:31.350 --> 04:35.640 form of JSON by this point, if everything went well or even if everything didn't go well, we should 04:35.640 --> 04:42.030 get a bad request in the form of Jason and I will do right now is say console log data just to see what 04:42.030 --> 04:42.620 we get back. 04:43.350 --> 04:47.640 So let's start our application and I'll say make start just to start everything. 04:49.710 --> 04:54.150 You might have to stop at first, but I know mine's not running, so I don't get a porting use error. 04:54.180 --> 04:54.660 There it is. 04:54.660 --> 04:55.110 It's running. 04:55.110 --> 05:01.230 So let's go back to our Web browser and I'll go to the homepage, see if I'm logged in. 05:01.230 --> 05:01.830 I am. 05:01.830 --> 05:07.020 I'll open the JavaScript console, go to the console and go to admin. 05:07.740 --> 05:08.490 All sales. 05:09.520 --> 05:14.980 And I have some kind of get element by tag name is not a function, so I have a typo there, so let's 05:14.980 --> 05:15.580 go fix that. 05:18.420 --> 05:21.750 It's get elements by tag name elements, plural. 05:22.150 --> 05:26.940 OK, so let's stop this next stop, and this time I'll just start the back end. 05:32.690 --> 05:37.200 And I'll run air in case I have more problems in my JavaScript, as I often do. 05:37.880 --> 05:45.190 So back here, clear the console, reload this page and this time I got a value back. 05:45.440 --> 05:46.490 So there it is, an array. 05:46.520 --> 05:49.550 So let's go to the network tab where it's easier to see stuff. 05:50.300 --> 05:57.560 And look at all sales of the post and look at the response and when I get back is all of this information, 05:58.040 --> 05:58.790 which is perfect. 05:58.790 --> 06:04.280 So object, my first object index zero has all of the widget information. 06:05.750 --> 06:10.310 It's all there, perfect, and my second one has all of that information as well, so I should have 06:10.310 --> 06:12.050 one for Clark Kent and I do. 06:12.050 --> 06:15.250 And my second one should be for Bruce Wayne, and it is perfect. 06:15.890 --> 06:20.810 So in the next lecture, we can take that, Jason, we're getting back and actually populate our table 06:20.810 --> 06:24.140 that we have on this page and we'll get started on that next time around.