1 00:00:00,450 --> 00:00:02,960 Beautiful with our structure in place. 2 00:00:03,120 --> 00:00:06,150 Now we can start working on our pageant function. 3 00:00:06,380 --> 00:00:11,600 That is probably going to be the most important one because it's gonna set up all our pageant nation. 4 00:00:11,700 --> 00:00:14,250 And then remember it was within the helpers. 5 00:00:14,340 --> 00:00:18,300 So I'm going to had two helpers and then just to show you what we're gonna get. 6 00:00:18,300 --> 00:00:23,610 I'm gonna console log everything that we're doing so I'm gonna go with the product and then I'm gonna 7 00:00:23,640 --> 00:00:28,500 do inspect just so I can see what is happening within my function. 8 00:00:28,530 --> 00:00:32,730 So within the console I should have an array with all my products. 9 00:00:32,730 --> 00:00:36,210 That's what I'm passing in of course within the product context. 10 00:00:36,270 --> 00:00:43,320 When I invoke the patch nation first thing we would need to decide is how many items we would want per 11 00:00:43,320 --> 00:00:43,980 page. 12 00:00:43,980 --> 00:00:51,120 Now I'm gonna go with four just for the simple reason that my C assess is set up this way where essentially 13 00:00:51,120 --> 00:00:55,860 I have four columns but of course once we set up the functionality I'm going to show it it doesn't matter. 14 00:00:55,860 --> 00:00:57,600 We can have five items per page. 15 00:00:57,600 --> 00:01:00,360 We can have 10 items we can have twenty two thousand. 16 00:01:00,360 --> 00:01:01,820 It doesn't really matter. 17 00:01:01,830 --> 00:01:07,710 The only reason why I'm going with 4 is the simple fact that again I have four columns so I have four 18 00:01:07,710 --> 00:01:12,570 column layout so that's why when I set up the page of course it looks a bit nicer where if you would 19 00:01:12,570 --> 00:01:17,370 have I don't know five or six then you're just going to have two rows which is again not the end of 20 00:01:17,370 --> 00:01:20,640 the world but that's the reason why I went with four items. 21 00:01:21,000 --> 00:01:25,670 So like I said First we need to come up with how many items per page one. 22 00:01:25,780 --> 00:01:33,540 And I'm gonna set this up as a variable so cost my items per page and we're gonna go with four or at 23 00:01:33,540 --> 00:01:34,860 least I'm going to go with four. 24 00:01:34,920 --> 00:01:39,420 You can go with any number and then again like I previously mentioned once we set up the functionality 25 00:01:39,780 --> 00:01:44,160 I'm going to show you that everything is still going to work whether we're gonna have five items ten 26 00:01:44,160 --> 00:01:46,580 items or fifty five thousand items. 27 00:01:46,800 --> 00:01:52,200 And once we have decided how many items per page we're going to have then we're going to have to calculate 28 00:01:52,530 --> 00:01:54,040 how many pages we're going to have. 29 00:01:54,060 --> 00:01:56,750 And that is going to depend on how many products. 30 00:01:56,790 --> 00:02:02,670 And of course how many items per page because if I have 15 products and then I would want four items 31 00:02:02,670 --> 00:02:05,690 per page I'm going to have one value for the pages. 32 00:02:05,940 --> 00:02:11,910 And then if I have 25 items and then I'm still going well let's say for items per page then of course 33 00:02:11,910 --> 00:02:15,720 I'm going to have different amount of pages and we're going to do a little bit of math. 34 00:02:15,750 --> 00:02:22,320 So we're going to go at cons then the variable name is gonna be number of pages and that is going to 35 00:02:22,320 --> 00:02:24,940 be equal to a product's length. 36 00:02:25,020 --> 00:02:31,440 So whatever is the length of my array divided by the items per page items per page. 37 00:02:31,440 --> 00:02:35,730 Now the gotcha here is going to be that it is not gonna be a even number. 38 00:02:35,730 --> 00:02:40,740 So if we console log number of pages you're going to see that it's three point seventy five. 39 00:02:41,100 --> 00:02:42,750 And that's not what we're looking for. 40 00:02:42,750 --> 00:02:45,360 So what I would want is to have an even number. 41 00:02:45,480 --> 00:02:51,050 But I would want to have a even number but I would want that even number to be rounded up. 42 00:02:51,090 --> 00:02:51,850 Why. 43 00:02:52,140 --> 00:02:56,770 Because I don't want three pages with four items each which is going to give me twelve. 44 00:02:56,920 --> 00:03:02,820 I would rather one have four pages so three of them are going to have four items and then the last one 45 00:03:02,820 --> 00:03:05,990 is just going to have remaining items in that page. 46 00:03:06,120 --> 00:03:12,270 So in order to set that up we're going to go with the math ceiling and we're just going to pass our 47 00:03:12,270 --> 00:03:13,410 calculation. 48 00:03:13,440 --> 00:03:15,620 So let me add the parentheses here. 49 00:03:15,630 --> 00:03:20,610 Now you're going to see that our number is always going to be even and it's going to be rounded up so 50 00:03:20,640 --> 00:03:27,300 that way if you have I don't know four point one pages then you know so five pages with the last one 51 00:03:27,390 --> 00:03:29,900 not having the full amount of items of course. 52 00:03:30,200 --> 00:03:30,500 Okay. 53 00:03:30,510 --> 00:03:32,820 We have our calculation now what. 54 00:03:32,880 --> 00:03:35,970 Well now we want to create a new product. 55 00:03:35,970 --> 00:03:36,940 All right. 56 00:03:37,020 --> 00:03:39,280 And again we're still returning product. 57 00:03:39,390 --> 00:03:41,400 That's why everything is displayed correctly. 58 00:03:41,400 --> 00:03:44,060 But now we're going to set up a new product. 59 00:03:44,070 --> 00:03:44,420 All right. 60 00:03:44,460 --> 00:03:47,760 And we're going to go with concept new products. 61 00:03:47,820 --> 00:03:54,410 And in order to set this up we're going to use array from method so array from and then if we would 62 00:03:54,420 --> 00:03:59,540 want to set up the array using array from method because essentially this is what it's doing. 63 00:03:59,550 --> 00:04:03,270 So when we use array from method we're setting up a new. 64 00:04:03,270 --> 00:04:03,660 All right. 65 00:04:04,200 --> 00:04:10,340 And what's really cool about from method that if we pass in the object with a length property it's going 66 00:04:10,340 --> 00:04:13,530 to create an array with that many items. 67 00:04:13,530 --> 00:04:18,590 So in this case we're gonna go with length and length is going to be the number of pages. 68 00:04:18,720 --> 00:04:24,360 So I'm going to have the array with this many items in this case this is gonna be before in other case 69 00:04:24,390 --> 00:04:26,130 that would be three to one. 70 00:04:26,130 --> 00:04:26,760 I don't know. 71 00:04:26,850 --> 00:04:28,670 Again twelve or whatever. 72 00:04:28,740 --> 00:04:32,350 So we're gonna have a length and that is going to be equal to number of pages. 73 00:04:32,490 --> 00:04:34,460 So we're going to set this equal to number of pages. 74 00:04:34,740 --> 00:04:41,370 And what's also cool about this from method that we have a second argument oh we have the first one 75 00:04:41,790 --> 00:04:47,280 where we pass passing what we would want to use to create our new or a general case again was object 76 00:04:47,280 --> 00:04:49,140 with a length property. 77 00:04:49,350 --> 00:04:56,160 And the second one is a map method that allow us to iterate over our array and it works exactly the 78 00:04:56,160 --> 00:05:02,840 same way how we have a regular map method where we can have access to things can have the access to 79 00:05:02,840 --> 00:05:04,180 the item itself. 80 00:05:04,310 --> 00:05:07,400 And the second one is in fact the index. 81 00:05:07,670 --> 00:05:13,610 In this case we don't really care about Nero them but in next video when we do a bit different setup 82 00:05:13,920 --> 00:05:19,040 you're going to see why index would matter because in this case we're going to use a splice method and 83 00:05:19,040 --> 00:05:21,710 then in the next video we're going to use a slice. 84 00:05:21,710 --> 00:05:28,100 The difference would be that Splice is going to in fact mutate the original right which is sometimes 85 00:05:28,100 --> 00:05:29,120 not the best case scenario. 86 00:05:29,120 --> 00:05:30,870 That's why I'm going to show you both of them. 87 00:05:30,920 --> 00:05:32,120 So what happens here. 88 00:05:32,120 --> 00:05:35,800 Well I'm gonna iterate over my array but I'm returning. 89 00:05:35,960 --> 00:05:41,390 So each and every time I'm gonna run this function I'm gonna be accessing one of the items again I have 90 00:05:41,390 --> 00:05:43,270 access to the item as well as the index. 91 00:05:43,280 --> 00:05:49,040 Now in this case I don't care about either of them but what I would want is right return and I'm just 92 00:05:49,040 --> 00:05:54,890 going to type in hello world and you let me see that whatever we are returning from this function is 93 00:05:54,890 --> 00:06:01,180 going to be added as our item just to show that we're going to go with console log new products. 94 00:06:01,340 --> 00:06:05,720 And you're clearly going to see that now I have the array of four items. 95 00:06:05,720 --> 00:06:10,470 Now why I have four items because that of course is number of pages. 96 00:06:10,530 --> 00:06:12,950 That is the value for my link property. 97 00:06:13,040 --> 00:06:17,220 That's why I have four items and then whatever I return from my math method. 98 00:06:17,480 --> 00:06:19,130 Well this is gonna be the value. 99 00:06:19,160 --> 00:06:24,650 So now let's make things interesting because having the array of hello world is nice but what I would 100 00:06:24,650 --> 00:06:25,550 really want. 101 00:06:25,580 --> 00:06:28,620 Well I would want to badger Nate my product. 102 00:06:28,670 --> 00:06:30,260 So how this is going to look like. 103 00:06:30,410 --> 00:06:37,160 Well from the array I'm going to return products then we have a splice method. 104 00:06:37,280 --> 00:06:41,460 And what happens would splice we need to say where we would want to start. 105 00:06:41,780 --> 00:06:45,620 And how many items we would want to remove from the original array. 106 00:06:45,980 --> 00:06:51,990 Please keep in mind that with each iteration a product array is gonna get smaller. 107 00:06:52,100 --> 00:06:57,950 So the one that we're passing in and where I would want to start well on one start from the beginning 108 00:06:57,950 --> 00:06:58,820 of the era. 109 00:06:58,880 --> 00:07:00,920 How many items I would want to remove. 110 00:07:01,400 --> 00:07:05,030 Well how many items I have per page I believe I have four. 111 00:07:05,150 --> 00:07:06,740 So that of course is my variable. 112 00:07:07,040 --> 00:07:09,470 So I'm just gonna go with items per page. 113 00:07:09,570 --> 00:07:12,800 Now check it out what is going to be the new products right now. 114 00:07:12,980 --> 00:07:19,700 It is going to be an array of arrays and then each array is going to have Max for items. 115 00:07:19,880 --> 00:07:26,930 But of course the last one if we don't have 16 items in our case if we don't have the full page then 116 00:07:26,930 --> 00:07:28,010 this is just going to have three. 117 00:07:28,550 --> 00:07:29,840 So each iteration. 118 00:07:29,840 --> 00:07:36,380 What I'm doing is I'm making my product array smaller by running the splice method. 119 00:07:36,380 --> 00:07:44,050 I start from the beginning of the array and I remove with how many items I have per page you're at five. 120 00:07:44,060 --> 00:07:46,670 Then of course you would remove five items if you have one. 121 00:07:46,820 --> 00:07:50,570 Then you would remove one item and just to reiterate what's happening. 122 00:07:50,990 --> 00:07:57,880 So we're passing in products that we have fetched from the API we came up with how many items per page. 123 00:07:57,920 --> 00:08:02,490 We would want then we need to calculate how many pages we're going to have. 124 00:08:02,510 --> 00:08:08,390 And again this is going to change depending on how big is your product array and how many items you 125 00:08:08,380 --> 00:08:09,820 would want per page. 126 00:08:09,860 --> 00:08:15,560 Again we're just doing the math operation we using the math ceiling because we always want to have a 127 00:08:15,560 --> 00:08:21,830 round number for pages it doesn't make sense to have three point five pages you'd want four pages and 128 00:08:21,830 --> 00:08:25,520 then of course the last page if it doesn't have full amount of items. 129 00:08:25,550 --> 00:08:31,880 Well just going to display I don't know one or two items or whatever items fit in that page and then 130 00:08:31,880 --> 00:08:40,100 we create a new product array where we use array from within the array from we first need to say what 131 00:08:40,100 --> 00:08:41,540 we're going to use to create our Rea. 132 00:08:41,840 --> 00:08:48,560 And one of the options is to have an object with a link properly and of course the number of pages is 133 00:08:48,560 --> 00:08:54,470 going to be our length property and then we have a map method which iterate over each and every item 134 00:08:54,560 --> 00:09:00,470 in that array and then wherever we're going to turn from that function is going to be placed within 135 00:09:00,470 --> 00:09:07,460 that item and in our case we're using the splice method which again mutates the original products array 136 00:09:07,820 --> 00:09:14,720 and we just run products splice and then we have where we would want to start and we always start with 137 00:09:14,840 --> 00:09:20,030 zero index and then we're just removing whatever items that we have per page. 138 00:09:20,030 --> 00:09:27,650 So in since this case we have for first iteration I remove four items next for Flanagan four and last 139 00:09:27,650 --> 00:09:31,690 one since I had only 15 items it had only three. 140 00:09:31,760 --> 00:09:32,370 So just one. 141 00:09:32,420 --> 00:09:33,010 Okay. 142 00:09:33,050 --> 00:09:37,410 So grab me the last three items and then of course I have the new product. 143 00:09:37,460 --> 00:09:42,800 Now I'm not going to return right now to new products because I want to show you another way how we 144 00:09:42,800 --> 00:09:47,510 can do that using this slice method which does not mutate right. 145 00:09:47,660 --> 00:09:53,210 And then we're going to spend one video of accessing the information because please keep in mind right 146 00:09:53,210 --> 00:09:55,800 now it's not anymore a simple array. 147 00:09:55,910 --> 00:10:01,570 So it's not like just passing saw it and you're good to go and in fact we're going to have to refactor 148 00:10:01,570 --> 00:10:08,890 our code a bit because remember when we access sorted within the page product there was nothing said 149 00:10:08,950 --> 00:10:11,200 about array of arrays. 150 00:10:11,200 --> 00:10:14,920 Our initial setup was that sword was just a simple array. 151 00:10:15,490 --> 00:10:18,170 But now of course we have array of arrays. 152 00:10:18,310 --> 00:10:24,730 And what you can also clearly see is that we're mutating the original array. 153 00:10:24,730 --> 00:10:25,480 Why. 154 00:10:25,480 --> 00:10:32,070 Well because notice we only have filters why we have filters because there's no items within the product 155 00:10:32,080 --> 00:10:32,980 when we're returning. 156 00:10:33,310 --> 00:10:34,360 So what happens. 157 00:10:34,360 --> 00:10:40,590 We have the products then we run product splice and then we return the product. 158 00:10:40,720 --> 00:10:46,260 However there's nothing left within the product because we were mutating the original product. 159 00:10:46,260 --> 00:10:46,570 All right.