1
00:00:08,070 --> 00:00:11,250
Hey everybody what's going on this is Caleb with Debb slopes.

2
00:00:11,580 --> 00:00:15,580
And in this video we're going to talk about our final transformation.

3
00:00:15,600 --> 00:00:19,430
It's called Ziph and it sort of does exactly what it sounds like.

4
00:00:19,590 --> 00:00:25,560
You can take two observables or three or four and zip them together into one single observable which

5
00:00:25,560 --> 00:00:26,430
is pretty cool.

6
00:00:26,430 --> 00:00:30,720
So let's go ahead and pull open our X playground just like so.

7
00:00:30,960 --> 00:00:36,200
And what we're going to do is we're going to go ahead and create a new playground page.

8
00:00:36,450 --> 00:00:42,600
We're going to name this zip and we're going to go ahead and select all delete and make a little more

9
00:00:42,600 --> 00:00:43,710
room here.

10
00:00:43,830 --> 00:00:49,080
Then of course we're going to paste in our four lines that we've been using and I just went ahead and

11
00:00:49,080 --> 00:00:51,780
pasted the Dispose bag because we're going to need it anyway.

12
00:00:52,140 --> 00:00:55,560
Then we're going to go ahead and create some observables.

13
00:00:55,560 --> 00:00:56,180
OK.

14
00:00:56,550 --> 00:00:59,580
We're going to create one for car makes.

15
00:00:59,580 --> 00:01:05,360
We're going to do another one for car models and then I'm going to show you how zip works.

16
00:01:05,370 --> 00:01:11,880
So go ahead and type Let car makes and that's going to be an observable.

17
00:01:11,880 --> 00:01:14,720
But of course it's not showing up yet so we're going to go ahead.

18
00:01:14,770 --> 00:01:18,260
Oh you know it looks like it did dot of 0.

19
00:01:18,600 --> 00:01:19,070
Maybe not.

20
00:01:19,080 --> 00:01:19,350
OK.

21
00:01:19,350 --> 00:01:22,550
So go ahead and save it and close it.

22
00:01:22,800 --> 00:01:26,720
Then we're going to reopen it and build it.

23
00:01:26,760 --> 00:01:27,750
There we go.

24
00:01:27,750 --> 00:01:31,400
And now if we type of IT SHOWS UP LOOK THAT.

25
00:01:31,530 --> 00:01:36,320
So what we're going to do is we're going to go ahead and give it three string values.

26
00:01:36,390 --> 00:01:40,530
The first is going to be a car model like DeLorean.

27
00:01:40,560 --> 00:01:44,430
The second is going to be another or sorry not a car model a car make.

28
00:01:44,430 --> 00:01:47,600
The second is going to be Bugatti very fancy.

29
00:01:47,730 --> 00:01:50,180
And the last one will be Lotus.

30
00:01:50,430 --> 00:01:50,960
OK.

31
00:01:51,210 --> 00:01:53,590
So those are three car makes.

32
00:01:53,640 --> 00:01:58,890
And now what we're going to do is we're going to create another observable but we're going to call it

33
00:01:59,220 --> 00:02:01,630
let car models.

34
00:02:02,010 --> 00:02:07,150
It's going to be an observable and we're going to use of to create it.

35
00:02:07,200 --> 00:02:10,370
Now we're going to go ahead and give it three car models as well.

36
00:02:10,380 --> 00:02:15,200
Now I'm going to put them in the proper order for now because that is important.

37
00:02:15,210 --> 00:02:20,980
So I'm going to type DMC 12 that's the model from the future.

38
00:02:21,120 --> 00:02:28,180
I'm going to go ahead and do the Bugatti Veyron and the Lotus Elise.

39
00:02:28,200 --> 00:02:28,760
All right.

40
00:02:29,010 --> 00:02:34,650
So now we have an observable car makes and an observable of car models.

41
00:02:34,650 --> 00:02:41,790
Now we can do is we can call observable we can create a new one but we can call DOT Zipp and if you

42
00:02:41,790 --> 00:02:49,390
read the description here it says merges the specified observable sequences into one observable sequence.

43
00:02:49,400 --> 00:02:55,410
When ever all of the observable sequences have produced an element at a corresponding index.

44
00:02:55,470 --> 00:03:00,910
So what we're going to do is we're going to do zip and collection.

45
00:03:01,020 --> 00:03:08,730
Now what we need to do is we need to give it both of our observables so we'll type car makes Khama car

46
00:03:08,820 --> 00:03:15,700
models so we passed in both and we want to Zipp those together into one single observable.

47
00:03:15,840 --> 00:03:16,550
OK.

48
00:03:16,830 --> 00:03:23,820
Now after Zipp we need to create some curly brackets here for the closure part of dot Ziph and what

49
00:03:23,820 --> 00:03:30,630
we're basically going to describe is what we should print out from both observables zipped together.

50
00:03:30,630 --> 00:03:34,730
Now what we've been using we've been using dollar signs zero right.

51
00:03:34,770 --> 00:03:41,370
That is to get the elements out of an observable we cycle through and we pass the element to dollar

52
00:03:41,370 --> 00:03:42,290
sign zero.

53
00:03:42,300 --> 00:03:42,930
Right.

54
00:03:43,200 --> 00:03:44,270
That's what that's what we do.

55
00:03:44,280 --> 00:03:47,630
But we're dealing with two observables.

56
00:03:47,790 --> 00:03:55,350
So if zero is the first index what we can do is we can print out dollar sign one and that will get the

57
00:03:55,350 --> 00:03:59,070
element at the second index which in this case is car models.

58
00:03:59,100 --> 00:04:04,290
Now this is no good we're getting an error it's saying that consecutive statements must be separated.

59
00:04:04,470 --> 00:04:09,860
But what we're going to do is we're actually going to just go ahead and add an empty string with just

60
00:04:09,860 --> 00:04:11,440
the space right in the middle.

61
00:04:11,450 --> 00:04:14,400
Well I guess it's not empty but it has a space.

62
00:04:14,550 --> 00:04:19,650
And what that's going to do is it's basically going to print out the first element from the first observable

63
00:04:20,190 --> 00:04:25,330
then put a space and then print the first element from the second observable.

64
00:04:25,500 --> 00:04:26,250
OK.

65
00:04:26,400 --> 00:04:29,640
So dollar sign one is for our second observable dollar sign.

66
00:04:29,640 --> 00:04:32,300
Zero is for the first observable.

67
00:04:32,490 --> 00:04:33,100
OK.

68
00:04:33,360 --> 00:04:37,890
So of course this is an observable but it's worthless unless we subscribe to it.

69
00:04:37,890 --> 00:04:47,310
So go ahead and call subscribe and we need to use on next whip's on next like so then inside of next

70
00:04:47,310 --> 00:04:53,430
we're going to just print and you might be thinking well do we print dollar signs zero dollar sign one.

71
00:04:53,630 --> 00:05:00,990
The thing with Zipp is that zip is going to basically take our two observables and smoosh them together

72
00:05:01,050 --> 00:05:03,660
into one observable which is really cool.

73
00:05:03,900 --> 00:05:09,940
Now because of that since it's just one observer we can use the first index like so and watch what happens

74
00:05:09,940 --> 00:05:11,210
when we print it out.

75
00:05:11,290 --> 00:05:21,460
We get DeLorean space DMCE 12th Bugatti's space Verin Lotus space Elise we get them zipped together

76
00:05:21,460 --> 00:05:23,250
into a single observable.

77
00:05:23,290 --> 00:05:24,790
That's pretty cool.

78
00:05:24,790 --> 00:05:27,890
And you know what I think I'm actually going to clean this code up a little bit.

79
00:05:27,910 --> 00:05:32,290
Sometimes things like this can exist on one line and it looks just fine.

80
00:05:32,650 --> 00:05:35,300
And then we can call the DOT subscribe underneath.

81
00:05:35,320 --> 00:05:36,240
Very cool.

82
00:05:36,250 --> 00:05:42,520
Now of course the last thing we need to do is to add it to the Dispose bag like so and go ahead and

83
00:05:42,520 --> 00:05:44,770
return down to its nice and clean.

84
00:05:44,800 --> 00:05:49,750
But check out what we're doing here guys we are basically creating two observables with three values

85
00:05:49,750 --> 00:05:58,900
in each we are calling observable Ziph and then we're using car makes car models and we're zipping them

86
00:05:58,900 --> 00:06:01,140
together into a single observable.

87
00:06:01,170 --> 00:06:01,960
OK.

88
00:06:02,290 --> 00:06:08,260
Now what this is doing is it is zipping through and it's saying OK first observable first element then

89
00:06:08,260 --> 00:06:12,850
a space second observable first element then zips through again.

90
00:06:12,850 --> 00:06:18,760
Second element in the first one second element and the second one then third and third and it prints

91
00:06:18,760 --> 00:06:20,920
them all out on the next call.

92
00:06:20,920 --> 00:06:22,750
That's really really cool.

93
00:06:22,750 --> 00:06:25,960
Now I want to show you what happens if I add a fourth element.

94
00:06:25,960 --> 00:06:31,070
You might think oh there's going to be an issue it'll say maybe the index is out of range.

95
00:06:31,180 --> 00:06:38,680
But watch what happens if I did say Chevy or Chevrolet.

96
00:06:38,740 --> 00:06:39,970
Watch what happens.

97
00:06:41,580 --> 00:06:43,310
It just prints out the three.

98
00:06:43,380 --> 00:06:50,940
Basically what Zipp does is it merges together to observables but it pays attention to the smallest

99
00:06:51,060 --> 00:06:51,570
index.

100
00:06:51,570 --> 00:06:58,380
So you never have an issue with it being out of range because it can never go past the smallest number

101
00:06:58,380 --> 00:07:00,710
of elements in an observable which is pretty cool.

102
00:07:00,720 --> 00:07:07,170
Now of course if I were to add in suburban You'll see it'll print out that fourth element now.

103
00:07:07,170 --> 00:07:12,330
So that's one thing we can do but just know that zip is going to pay attention to the observable with

104
00:07:12,330 --> 00:07:16,560
the smallest number and then it'll make all the pairs of elements that way.

105
00:07:16,560 --> 00:07:22,650
Now of course pairing specific data like this is probably not the best because your two observables

106
00:07:23,100 --> 00:07:27,960
may be unsorted data but it is good if you want to pair them together.

107
00:07:27,960 --> 00:07:33,450
Maybe if you wanted to create an observable of two sets of data that are chosen on the same screen in

108
00:07:33,450 --> 00:07:38,910
an app if you maybe they pushed a button for next it could merge those together into a single observable

109
00:07:39,180 --> 00:07:41,370
and then pass it on to the next controller.

110
00:07:41,370 --> 00:07:44,640
That's just one idea I had for how this could be used.

111
00:07:44,670 --> 00:07:50,370
So that's zip that's one of the transformation functions in our swift and the next video.

112
00:07:50,370 --> 00:07:54,270
I'm going to give you a challenge to put your knowledge of transformations to the test.

113
00:07:54,270 --> 00:07:57,340
Awesome job with these past four videos and I'll see in the next one.