WEBVTT 00:02.050 --> 00:07.960 So now that we have the handler more or less in place, it's time to move on to the front end and just 00:07.960 --> 00:09.490 see if we can get things working. 00:09.730 --> 00:16.060 But before we do that, here in Handler's Dash API, where I create this variable rest for response, 00:17.050 --> 00:23.560 I probably should put a little JSON tag here just to explicitly say that in JSON I want orders to be 00:23.560 --> 00:29.440 called orders like that and say, OK, now let's go over to the sales page. 00:29.440 --> 00:33.750 And of course, the only thing we're really concerned with right here is the JavaScript. 00:34.300 --> 00:39.760 So the very first thing I'm going to do is right now, all of this JavaScript is just by itself at the 00:39.760 --> 00:40.600 bottom of this. 00:40.600 --> 00:44.440 And I'm going to wrap everything in here. 00:45.950 --> 00:51.340 Before let token, I'm going to put that in a document added event listener, which is cleaner document 00:51.620 --> 01:02.210 and event listener, and it will be on the condition the dome content loaded and will execute a function. 01:07.350 --> 01:15.150 And I'll grab this part and cut it and backspace here to get rid of these blank lines and go right down 01:15.150 --> 01:22.070 to the bottom of this right like that and paste that in there, OK, and move it over there. 01:22.110 --> 01:22.860 That's cleaner. 01:23.040 --> 01:25.170 It worked the other way, but this is actually much cleaner. 01:26.130 --> 01:30.300 Now, just after my opening scripted ill-Defined two variables. 01:30.300 --> 01:36.270 Two things that I know I'm going to have to pass to my statement as part of a JSON payload, and the 01:36.270 --> 01:37.500 first one is the current page. 01:37.500 --> 01:45.900 So I'll declare a variable at current page equal say one and I'll let page size, which is the other 01:45.900 --> 01:48.120 thing I need to send along equal to three. 01:48.420 --> 01:54.840 OK, so I only want to display three things per page and I want the current page to be equal to one. 01:54.990 --> 01:58.300 OK, now these are outside of any functions or anything. 01:58.320 --> 02:00.480 So these are available to everything inside the script. 02:01.920 --> 02:07.970 Now, let's get out of here after we declare our token and our body, we get those values and we declare 02:07.970 --> 02:10.230 a request options in between those wars. 02:10.260 --> 02:11.280 Creator Jason Palit. 02:11.580 --> 02:17.100 So I'll say let and I'll call it Nordea equal adjacent object or JavaScript object. 02:17.580 --> 02:20.200 And it's going to have a page underscore size. 02:20.260 --> 02:28.170 I'm looking for in the handler equal to page size and it's going to have current page current underscore 02:28.170 --> 02:30.480 page be set to current page. 02:32.100 --> 02:34.970 And of course those are hard coded values, but we'll fix that later on. 02:35.640 --> 02:44.630 And then down here in the request options, I'll specify the body is Jason Stringer like. 02:47.770 --> 02:54.010 Now, when we get down to this part, after we call all sales, what that's going to do now is give 02:54.010 --> 02:55.300 us back a data object. 02:55.690 --> 02:59.560 But inside of the data object, we're actually having our orders. 02:59.570 --> 03:01.030 So we need to change them a little bit. 03:01.150 --> 03:10.900 We'll say if data orders, if we have that value, if it's not set, then we want to go data orders 03:13.270 --> 03:13.840 for each. 03:14.350 --> 03:17.110 OK, so let's try this out and see what we get. 03:17.270 --> 03:18.940 So go to my terminal. 03:19.360 --> 03:22.080 I'll stop everything that's already stopped. 03:22.570 --> 03:23.380 Start everything. 03:27.160 --> 03:33.490 Go back to my Web browser and I'll go to the homepage and we are logged in, so that's good and I'll 03:33.490 --> 03:38.950 go to admin, I should, first of all, open the JavaScript console so we'll see if there's any errors. 03:39.310 --> 03:41.710 And I'll go to admin all sales. 03:41.710 --> 03:43.660 And that's the only one we've been working on so far. 03:45.040 --> 03:47.710 And we get two things back. 03:47.980 --> 03:54.340 OK, perfect, so it actually seems to work now if we look at the response in the network. 03:57.340 --> 03:58.510 And look at this. 04:00.190 --> 04:02.020 And look at the response we get there. 04:03.630 --> 04:10.890 We get back pages one page, sizes three, last pages one and Total Records is three, but I only see 04:10.890 --> 04:12.220 two things showing up here. 04:12.240 --> 04:15.740 So something doesn't seem quite right, but we're actually getting pretty close. 04:15.930 --> 04:19.320 At least we successfully called our handler and we got some response back. 04:19.330 --> 04:23.910 So we got item zero, item one, and that's it. 04:24.210 --> 04:29.340 Even though the page size is three and we have three total records, we have some values back. 04:29.350 --> 04:30.490 So why are we getting to. 04:30.720 --> 04:32.370 Well, let's go back and look at our code. 04:34.780 --> 04:43.030 And go to Handler's apartment and see what we actually passed it, I said to you need by buy right there. 04:43.540 --> 04:47.110 So this call's online five thirty nine of my code. 04:47.110 --> 04:49.600 It says get orders, patinated two. 04:50.110 --> 04:53.830 So let's go look at Gettle orders patinated and see what that first argument is to. 04:53.830 --> 04:57.100 I told it to have two per page, so that is correct. 04:57.400 --> 05:00.310 For some reason I thought I'd say two to three but we said it to two. 05:00.310 --> 05:01.540 So this seems to be working. 05:01.540 --> 05:01.990 All right. 05:02.050 --> 05:03.400 OK, so at least we have it connected. 05:03.430 --> 05:06.280 We know that things are talking to each other as they should. 05:06.790 --> 05:13.330 But what I'd really like to do is back here is I'd like to have some kind of forward and back button, 05:13.330 --> 05:17.710 because right now we can only see the first page of data and there's no way I can get to the second 05:17.710 --> 05:18.090 page. 05:18.700 --> 05:24.100 So what I'm going to do is between this lecture and the next one is I'm going to go and put 10 or 15 05:24.100 --> 05:29.590 orders in the database so that I can actually pazhani back and forth a little bit and we'll start working 05:29.590 --> 05:34.570 on writing some some means of going back and forth between the pages of data. 05:34.660 --> 05:36.940 And we'll get started on that in the next lecture.