WEBVTT 00:02.700 --> 00:07.770 Let's implement a load more about Don to get more and sweaty instances from the rest api. 00:07.860 --> 00:13.800 Implementing such an outcome is very easy considering that the ads were released and point also provides 00:13.830 --> 00:19.800 a next parameter so implementing these barfed on is going to be very similar to what we've done here 00:19.920 --> 00:21.980 in the home component. 00:22.020 --> 00:31.210 Yeah I mean the question component and first of all in the data function let's define Nextel as Nola. 00:31.440 --> 00:36.210 And now let's modify the get questions first method accordingly. 00:36.210 --> 00:41.280 So first of all considering that we are going to call this method every time the load mode button is 00:41.280 --> 00:44.590 pressed up let's change the statement. 00:44.760 --> 00:46.280 So yeah we can change it. 00:46.280 --> 00:54.200 Like so these two were not push show spread operator data not results. 00:54.190 --> 00:59.550 Virginia we can basically do the same that we've done here in the home that a few component. 00:59.550 --> 01:08.390 So I'm just going to copy all this code and actually also this other line here like so that D of course 01:08.450 --> 01:12.820 has to be changed to loading that's worse. 01:15.120 --> 01:18.660 And we also need to define it here. 01:18.690 --> 01:22.630 So the answer is equals at the moment. 01:22.920 --> 01:24.210 False. 01:24.240 --> 01:30.480 So back to the method if they did or the next that we set it so that we can then use it as an endpoint 01:30.540 --> 01:31.140 later on 01:34.050 --> 01:34.380 copy 01:39.840 --> 01:43.160 then we can implement a very similar button. 01:43.170 --> 01:46.520 So I'm just going to copy all these Steve 01:51.120 --> 02:00.310 right below deep div container with the answer a component and let's indent back up one and two he's 02:00.330 --> 02:02.130 going to be loading answers 02:05.020 --> 02:07.120 into mantle that we want to call this time is 02:10.830 --> 02:12.120 question answers. 02:12.330 --> 02:14.750 Let's now go back to Chrome right away. 02:14.820 --> 02:19.870 And here we get an error because in fact in data we can't use the equals sign. 02:19.890 --> 02:22.080 We must use color. 02:22.320 --> 02:24.730 So on first. 02:24.740 --> 02:29.130 Sorry about that for now go back to Western to aim at a moment. 02:29.150 --> 02:37.180 Surely we can see that there is no button because the global said things for page no pudgy nation are 02:37.190 --> 02:40.450 the same that we're using of course for the home page. 02:40.460 --> 02:41.470 That's why they're global. 02:41.480 --> 02:44.210 Therefore base size is for. 02:44.210 --> 02:50.450 So let's just set these to two just to test the new batch I'm going to restart the development server 02:51.810 --> 02:56.140 Python server OK. 02:56.180 --> 02:58.000 Let's go back to chrome. 02:58.010 --> 03:00.780 We get three pages here in the on page. 03:00.920 --> 03:01.850 So let's open up. 03:01.850 --> 03:02.820 First question. 03:02.900 --> 03:03.370 India. 03:03.410 --> 03:12.520 We have two answers from rest the test and add me so I'm going to log out and log McKean as random yeah 03:12.590 --> 03:17.650 load more load more and let's add an answer. 03:18.490 --> 03:20.160 Yes sir submitter. 03:20.210 --> 03:25.270 Now let's go back home and let's open up the question again. 03:25.280 --> 03:30.170 And we see that we have debates and even though it's misplaced at the moment but if we click it then 03:30.170 --> 03:31.430 you ask where is added. 03:31.430 --> 03:32.270 Perfect. 03:32.300 --> 03:40.780 Let's actually fix the positioning for the button so in template appear we can just included your inside 03:40.780 --> 03:41.530 of the container. 03:41.590 --> 03:41.890 So 03:44.750 --> 03:44.990 below 03:47.980 --> 03:54.970 like so let's go back once again and let's refresh the page. 03:55.050 --> 03:56.630 Is that a button lot more. 03:56.630 --> 03:58.370 So let's see it's back to the application 04:01.030 --> 04:05.420 you'd have to us then we have Apple question. 04:06.170 --> 04:09.020 So here we have our array of questions. 04:09.200 --> 04:13.710 Also we have Nextel which shows us as you can see the new you add an end point. 04:13.730 --> 04:15.310 So let's click loads more. 04:15.320 --> 04:16.510 Next it goes back to normal. 04:16.520 --> 04:19.200 And the new instance is added to the array. 04:19.340 --> 04:24.290 One last thing that we need to do that you've probably noticed from the beginning is to add these dot 04:24.380 --> 04:30.720 loading answers equals true before using the API set of his function. 04:30.740 --> 04:36.140 I've single page application is getting better and better in the next lesson it will sell to implement 04:36.170 --> 04:42.290 a delete button so that users can delete the ancillary instances they've created if they no longer want 04:42.290 --> 04:43.560 him to be on the platform.