1
00:00:00,610 --> 00:00:01,990
Well our functionality works.

2
00:00:02,080 --> 00:00:07,780
And of course we are returning array of arrays which is our patch United products array.

3
00:00:07,780 --> 00:00:12,130
The problem might be that there are cases where you cannot use Splice.

4
00:00:12,130 --> 00:00:14,280
You cannot mutate the original array.

5
00:00:14,350 --> 00:00:19,660
So in this case we're gonna take a look at how we can set up the same functionality using these slice

6
00:00:19,660 --> 00:00:20,120
method.

7
00:00:20,350 --> 00:00:25,390
And then you can decide because again essentially please keep in mind we're going to return the same

8
00:00:25,450 --> 00:00:27,010
array of arrays.

9
00:00:27,160 --> 00:00:34,360
So our end result is not going to change just how we get there and what I'm gonna do right now is just

10
00:00:34,360 --> 00:00:36,320
so you can have for your reference.

11
00:00:36,320 --> 00:00:37,850
And I don't know what is your preference.

12
00:00:37,870 --> 00:00:40,570
Maybe later you're going to use splice instead.

13
00:00:40,720 --> 00:00:46,030
But I'm gonna stick with slice and I'm going to create the same thing I'm going to go with Khan's new

14
00:00:46,030 --> 00:00:46,500
product.

15
00:00:46,510 --> 00:00:51,160
And by the way there's gonna be quite a bit of repetition meaning we're still going to use array from

16
00:00:51,490 --> 00:00:53,830
the length of number of pages and all that.

17
00:00:53,890 --> 00:00:58,350
So we're gonna go with array from then we're passing our object.

18
00:00:58,350 --> 00:01:05,760
Again we have like property and again we need to have number of pages and we also still have our map

19
00:01:05,760 --> 00:01:06,100
method.

20
00:01:06,580 --> 00:01:10,530
However in this case though I would want to access the index why.

21
00:01:10,740 --> 00:01:12,070
While you're seeing a second.

22
00:01:12,300 --> 00:01:18,330
And if I don't want the actual item which is my first argument I can just omit it by passing in the

23
00:01:18,330 --> 00:01:19,200
underscore.

24
00:01:19,200 --> 00:01:22,320
So I'm going to passing underscore and then I'm gonna say next.

25
00:01:22,380 --> 00:01:28,560
So now maxing the index and if we're going to console log you're going to see that since I have four

26
00:01:28,560 --> 00:01:29,670
items in the array.

27
00:01:29,790 --> 00:01:36,250
Well what I'm going to have I'm going to 0 1 2 and 3 and of course right now we're just passing it on

28
00:01:36,280 --> 00:01:43,050
defined and the way it's gonna work is we're gonna have the slice method instead of splice and again

29
00:01:43,050 --> 00:01:49,740
the differences that splice mutates the original array when you run it but slice does not.

30
00:01:49,760 --> 00:01:54,660
So we're going to return then products and then we have the slice.

31
00:01:54,660 --> 00:01:56,400
Now for the slice it's a bit different.

32
00:01:56,550 --> 00:02:03,030
Where for displays we have the starting point and then how many items we would want to remove.

33
00:02:03,030 --> 00:02:09,660
In this case though if we're using slice we pass in again the starting point but then the second one

34
00:02:09,660 --> 00:02:11,050
is the ending point.

35
00:02:11,070 --> 00:02:12,900
Now what do we could use as an entry point.

36
00:02:12,900 --> 00:02:18,690
Well we could say items per page correct or there's gonna be a problem where you're going to see that

37
00:02:18,690 --> 00:02:26,160
we're going to have array of arrays but we're gonna be essentially copying the same value from the product

38
00:02:26,160 --> 00:02:26,680
array.

39
00:02:26,730 --> 00:02:33,270
So the first four items and you can clearly see that by checking out the first array which has the item

40
00:02:33,360 --> 00:02:36,890
12 with an idea of 12 and then the same goes for this guy.

41
00:02:37,200 --> 00:02:43,440
And then you can also see that because we have four items and the last one does have four items within

42
00:02:43,440 --> 00:02:50,820
the array that already is a red flag where we can say OK how can we have 16 items if we have only 14

43
00:02:50,820 --> 00:02:57,070
products because essentially we're just copying the same four items from the product array.

44
00:02:57,150 --> 00:03:03,210
What would be the solution solution would be in using the index since remember index is gonna change

45
00:03:03,240 --> 00:03:10,170
each and every time as we're iterating over our new alright that we're creating with a link property

46
00:03:10,200 --> 00:03:16,110
and number of pages and the way we're going to set this up we're going to set cost then the name is

47
00:03:16,110 --> 00:03:17,770
going to be stark.

48
00:03:17,940 --> 00:03:23,630
That is going to be equal to a index multiplied by items per page.

49
00:03:23,700 --> 00:03:26,400
So are multiplying this by items per page.

50
00:03:26,400 --> 00:03:31,230
And now of course we would want to change the slices well where each and every iteration.

51
00:03:31,350 --> 00:03:33,680
We're not going to start from the zero.

52
00:03:33,720 --> 00:03:39,840
We're gonna go would start that is gonna be our starting position and then instead of just grabbing

53
00:03:39,930 --> 00:03:49,790
items per page we're going to say start plus plus items per page and let's go forward what's happened.

54
00:03:49,800 --> 00:03:51,320
So we have the index.

55
00:03:51,330 --> 00:03:53,160
Initially it is going to be zero.

56
00:03:53,190 --> 00:04:00,630
We're gonna have index zero multiplied by items page just for that is going to return zero of course.

57
00:04:00,660 --> 00:04:05,190
Then we start with zero and then we go up to index of four.

58
00:04:05,640 --> 00:04:10,030
So we grab those items so 0 1 2 3 grab 4 items.

59
00:04:10,060 --> 00:04:16,410
Then next iteration index is gonna be already 1 multiplied by 4.

60
00:04:16,410 --> 00:04:23,430
Our STARTING POSITION IS GONNA BE AT index of 4 and then our end position is gonna be start plus items

61
00:04:23,430 --> 00:04:24,360
per page.

62
00:04:24,360 --> 00:04:29,810
So we're gonna start at index 4 and and up to index 8.

63
00:04:30,180 --> 00:04:32,110
And these are the items that we're gonna get.

64
00:04:32,220 --> 00:04:38,970
And as you can see now in this case we have proper array of arrays where we only have the unique values.

65
00:04:39,000 --> 00:04:43,680
And I can clearly see that by looking at first items this is going to be additive 12 and then this is

66
00:04:43,680 --> 00:04:45,870
gonna be a D of a love.

67
00:04:45,990 --> 00:04:49,730
And what you can also probably notice that we still get our product.

68
00:04:49,740 --> 00:04:54,320
So unlike splice where we mutate original array.

69
00:04:54,600 --> 00:04:57,720
In fact when we're using slice we're not doing that.

70
00:04:57,820 --> 00:05:00,210
That's the reason why all the items are still shown.

71
00:05:00,360 --> 00:05:06,150
Unlike previously when we used this plate again this is really up to you in this scenario doesn't really

72
00:05:06,150 --> 00:05:08,730
matter which ever method you'd use.

73
00:05:08,730 --> 00:05:13,960
But if there are cases where you cannot use splice you can definitely use lights.

74
00:05:13,980 --> 00:05:19,350
But in this case scenario of course you can just common this out and then uncommon the previous one

75
00:05:19,620 --> 00:05:21,240
if you like the syntax better.

76
00:05:21,270 --> 00:05:27,900
Essentially we're doing the same thing we're turning array of arrays where repatriating our products

77
00:05:27,900 --> 00:05:30,240
are right that we fetched from the API.