WEBVTT 00:01.240 --> 00:03.560 So far, everything seems to be working reasonably well. 00:03.610 --> 00:08.290 We're making our request to the backend with our authorization token and we're getting a response. 00:08.860 --> 00:13.210 And if we look at the response we're getting back here on our Web browser, I still have it open where 00:13.210 --> 00:14.730 it was the last time we did this. 00:15.040 --> 00:19.590 If I switched to Raw, you can see the Jason is coming in a really predictable format. 00:19.990 --> 00:25.060 We have our basic information here and then we have things about our widget or transaction and our customer. 00:25.090 --> 00:29.540 And we're going to use this to populate our table, which is really straightforward. 00:29.980 --> 00:36.610 So back here in all dash sales page HTML, I've just so far did console log data. 00:36.850 --> 00:41.200 And now what I want to do is actually to loop through all of the entries, images and we're getting 00:41.920 --> 00:42.790 that in JavaScript. 00:42.790 --> 00:50.080 That's as simple as data dot for each with a capital E and we put a function in there and I'll call 00:50.080 --> 00:56.560 what I'm passing for each iteration I for iteration and open a curly bracket and close it. 00:56.560 --> 00:58.540 So I don't forget an inside here. 00:58.750 --> 01:06.010 I'm just going to say let nu row equal t body, which we have a reference to right up there in line 01:06.010 --> 01:11.730 twenty nine dot insert row and that puts a row, that creates a row for us. 01:11.790 --> 01:19.660 OK, and I will create a self new cell, equal new row which we just created on line forty six in my 01:19.660 --> 01:21.390 code insert. 01:21.400 --> 01:26.060 So and we populate that with the information we want. 01:26.800 --> 01:32.800 So the first thing I want, if you look at the table at the top here is a transaction reference. 01:32.800 --> 01:36.490 I'm going to make that a clickable link, so I'll build that this way. 01:37.360 --> 01:46.810 I'll say nacelle the inner HTML is going to be equal to and I'll make this a JavaScript template using 01:46.810 --> 01:57.190 tactics a trip equals and I'll make that admin slash, admin slash sales slash and then using the JavaScript 01:57.190 --> 02:03.430 template syntax dollar sign curly bracket I, which is the value in the current iteration of this for 02:03.430 --> 02:12.190 each loop ID, which is the order eyeteeth and I'll close that quote, close the attack and say order 02:12.610 --> 02:16.720 and then dollar sign curly brackets ID again. 02:18.770 --> 02:26.150 And close my eyes and now finally put it back to close the JavaScript template, so that should insert 02:26.150 --> 02:29.860 something in the first cell in the row that I just inserted. 02:29.870 --> 02:33.140 But I better spell cell right here or I'll get a JavaScript error. 02:33.590 --> 02:34.160 That's better. 02:36.090 --> 02:47.340 Now, I'll make new cell equal to this time neuro insert cell to insert a second cell and a populated 02:47.340 --> 02:54.570 information pretty easily, I'll say let Eitam equal document dot create text node. 03:00.200 --> 03:02.780 And inside of that, I'll put IDOT. 03:03.970 --> 03:10.420 Customer, Daudt, last name, and that corresponds to this right here. 03:11.770 --> 03:18.930 I would be our first iteration customers down here and first name is right there, so I got customers 03:18.940 --> 03:24.700 up first or last name, last name plus, and then I'll put a comma in the space. 03:25.060 --> 03:29.160 Plus, I got customer first name, first underscore name. 03:30.670 --> 03:32.130 So that creates a variable for me. 03:33.010 --> 03:41.650 And I will say New South, the Penn child, and I'll put item in there, which I just created, so that's 03:41.650 --> 03:42.130 my second. 03:42.140 --> 03:43.840 So let's do the third cell. 03:45.190 --> 03:49.630 New cell equals neuro insert cell. 03:51.940 --> 03:57.640 And this time item is equal to document, not create text notes. 03:59.410 --> 04:05.470 And I'm going to put it in their widget dot net because that's what I want to display in that cell and 04:05.470 --> 04:09.040 all new cell and child. 04:09.610 --> 04:10.550 And I'm spending item. 04:12.450 --> 04:20.280 And finally, new cell equals neuro insert cell, it's an empty cell. 04:21.200 --> 04:33.420 So in this time, item is equal to document, not create text note, and I want idot transaction amount. 04:33.740 --> 04:38.180 Now that will display a sense but this will get it up there on the table for us anyway and append that 04:38.810 --> 04:40.610 new cell, the appen child. 04:43.430 --> 04:48.680 And if we did everything right, I already have the backend running and I run the front end using air 04:49.150 --> 04:51.680 you can see right here and it's running. 04:51.680 --> 04:53.930 So let's go back and refresh our page and see what we get. 04:54.710 --> 04:58.730 So reload the page and there is my information. 04:59.310 --> 05:01.180 And obviously these links don't go anywhere. 05:01.190 --> 05:05.840 We'll have to create the route in the handler and so forth for those to display the sales information 05:05.990 --> 05:07.430 on an individual basis. 05:07.880 --> 05:09.050 But you are always correct. 05:09.060 --> 05:13.010 I have slash admin slash sales too, which is order too. 05:13.790 --> 05:17.780 And I have the customer's name and I have the product and I have the amount and we'll have to write 05:17.780 --> 05:19.850 some JavaScript to format this as currency. 05:19.850 --> 05:21.040 But that's trivial. 05:21.100 --> 05:23.510 I will take care of that sort of thing in the next lecture.