1
00:00:00,120 --> 00:00:05,250
In this lecture, we are going to learn about flattening operators for observables.

2
00:00:05,490 --> 00:00:07,470
We've talked about flattening before.

3
00:00:07,710 --> 00:00:10,890
It's the idea of simplifying a complex array.

4
00:00:11,220 --> 00:00:17,550
Flattening the array will make things easier if we're attempting to loop through a deeply nested array.

5
00:00:18,120 --> 00:00:25,080
Flattening is a concept we can apply to observables one if we're in a situation with nested observables.

6
00:00:25,290 --> 00:00:26,730
Sounds crazy, right?

7
00:00:27,090 --> 00:00:31,890
Believe it or not, it's a common scenario you will face with our SJS.

8
00:00:32,189 --> 00:00:38,740
Creating an observable from within and observable is highly possible in our current example.

9
00:00:38,760 --> 00:00:40,710
We are emitting a basic value.

10
00:00:40,890 --> 00:00:44,970
We've emitted arrays, objects, numbers and strings.

11
00:00:45,270 --> 00:00:48,570
But what do you think would happen if we emitted an observable?

12
00:00:48,750 --> 00:00:51,000
Let's find out on our page.

13
00:00:51,000 --> 00:00:51,930
We have a button.

14
00:00:52,260 --> 00:00:56,280
The goal will be to initiate a request if the button is clicked.

15
00:00:56,730 --> 00:01:01,440
We will begin with listening for a cookie event on the button in our script.

16
00:01:01,620 --> 00:01:06,960
We are going to import the from event operator from the R x J.S. package.

17
00:01:09,350 --> 00:01:15,320
Next, we will completely replace the current chain of operators with the from event operator.

18
00:01:17,890 --> 00:01:23,020
It's been a while since we've used the from event operator as a reminder.

19
00:01:23,170 --> 00:01:26,200
It'll create an observable from an event source.

20
00:01:26,440 --> 00:01:31,090
We can wrap mouse keyboard and document events with this operator.

21
00:01:31,390 --> 00:01:33,670
The first argument is the targets.

22
00:01:33,940 --> 00:01:39,290
We should select the button from the document above the observable variable.

23
00:01:39,310 --> 00:01:42,190
We will create another variable called button.

24
00:01:44,820 --> 00:01:51,390
The value of the variable will be the document query selector function, I've already assigned an ID

25
00:01:51,600 --> 00:01:53,220
to the button call button.

26
00:01:53,520 --> 00:01:56,610
We can select the button in the document by its ID.

27
00:01:59,460 --> 00:02:04,560
Next, we will pass on the button selection to the from event operator.

28
00:02:07,090 --> 00:02:10,090
We will be listening for the click event on the button.

29
00:02:12,650 --> 00:02:15,080
Let's test if our operator is working.

30
00:02:15,500 --> 00:02:19,930
If we click on the button, the event object gets logged to the console.

31
00:02:20,150 --> 00:02:21,560
So far, so good.

32
00:02:21,920 --> 00:02:24,230
It's time to initiate a request.

33
00:02:24,440 --> 00:02:26,960
There are two operators we are going to need.

34
00:02:27,260 --> 00:02:33,320
First, we're going to need the map operator from the SJS operators package.

35
00:02:35,780 --> 00:02:42,200
Next, we need to import the Ajax operator from the Oryx genius slash Ajax package.

36
00:02:44,610 --> 00:02:48,240
We haven't had the chance to discuss the Ajax operator.

37
00:02:48,540 --> 00:02:52,530
It's a special operator for initiating HTP requests.

38
00:02:52,830 --> 00:02:58,710
We can perform various requests from get to post requests on our observable.

39
00:02:58,860 --> 00:03:02,640
We are going to change the pipe function with the map operator.

40
00:03:05,220 --> 00:03:10,860
We are adding the map operator because the Ajax operator is a creation operator.

41
00:03:11,160 --> 00:03:13,050
We can't add it to the pipeline.

42
00:03:13,350 --> 00:03:17,430
Instead, we need to call it from within a pipe able operator.

43
00:03:17,760 --> 00:03:22,800
The map operator is considered the most appropriate operator for this scenario.

44
00:03:23,130 --> 00:03:27,270
Inside the map operator, we will pass in an arrow function.

45
00:03:29,940 --> 00:03:33,030
We aren't going to accept the value from the event.

46
00:03:33,270 --> 00:03:36,400
It's not necessary inside the air function.

47
00:03:36,420 --> 00:03:40,260
We will return the Ajax dont get JSON function.

48
00:03:42,730 --> 00:03:49,060
Lastly, passing a URL or going to be using the rest API from JSON placeholder.

49
00:03:49,420 --> 00:03:53,620
I'll provide a link to this service in the resource section of this lecture.

50
00:03:56,240 --> 00:03:59,730
Let's try testing our button if we click on the button.

51
00:03:59,750 --> 00:04:02,510
We will receive an observable in the console.

52
00:04:02,780 --> 00:04:06,260
Let's break down what's going on because it can seem baffling.

53
00:04:06,590 --> 00:04:13,100
The main goal is to initiate a request when a button is clicked, handling click events and performing

54
00:04:13,400 --> 00:04:16,730
CPTPP requests are asynchronous operations.

55
00:04:17,029 --> 00:04:22,190
We should create these events with observables, which is what we're doing in our example.

56
00:04:22,820 --> 00:04:26,570
Up until now, we've been creating a single observable.

57
00:04:26,930 --> 00:04:31,370
But what if we need to create a chain of observable from multiple sources?

58
00:04:31,760 --> 00:04:37,580
The observable for the HTTP request shouldn't be created until the button has been clicked.

59
00:04:38,030 --> 00:04:40,040
Creating observables is simple.

60
00:04:40,340 --> 00:04:44,120
However, handling their output values is another story.

61
00:04:44,780 --> 00:04:48,290
At the end of the day, we want the response from the request.

62
00:04:48,530 --> 00:04:52,730
Therefore, we need to subscribe to two different observables.

63
00:04:53,060 --> 00:04:56,360
We need to subscribe to the click event and the request.

64
00:04:56,750 --> 00:05:00,710
Subscribing to the request should happen after the click occurs.

65
00:05:01,250 --> 00:05:06,560
We're getting an observable because we're subscribing to the click event, but not the request.

66
00:05:06,920 --> 00:05:12,230
The click event returns another observable, which is the observable for the request.

67
00:05:12,560 --> 00:05:18,500
If we want the response from the request, we're going to need to subscribe to the request after we've

68
00:05:18,500 --> 00:05:20,030
received the observable.

69
00:05:20,390 --> 00:05:22,070
We can perform this action.

70
00:05:22,070 --> 00:05:25,660
Any first subscription in the next function.

71
00:05:25,670 --> 00:05:30,020
We are going to call the subscribed function on the value argument.

72
00:05:32,510 --> 00:05:36,320
Next, we will log the value from the second subscription.

73
00:05:38,900 --> 00:05:45,590
This time, if we click the button, we will receive the response from the second observable problem

74
00:05:45,590 --> 00:05:47,090
solve, but not really.

75
00:05:47,420 --> 00:05:53,920
Our code can quickly become a nightmare by constantly subscribing to observables from within an observer.

76
00:05:54,320 --> 00:05:58,430
The observer shouldn't have to subscribe to multiple observables.

77
00:05:58,760 --> 00:06:00,950
It should be given the value when it's ready.

78
00:06:01,520 --> 00:06:04,220
That's the whole point of using our SJS.

79
00:06:04,520 --> 00:06:08,570
The observer shouldn't have to care about how to retrieve the value.

80
00:06:08,840 --> 00:06:11,000
It just wants to be given a value.

81
00:06:11,270 --> 00:06:18,020
This problem compounds if we're creating more than two observables, the whole situation can get messy

82
00:06:18,020 --> 00:06:18,650
fast.

83
00:06:19,130 --> 00:06:22,940
This is where flattening operators come in to play a flattening.

84
00:06:22,970 --> 00:06:27,560
Operator can subscribe to an observable emitted from within a pipeline.

85
00:06:27,860 --> 00:06:34,940
If the observable emits a value, the value will be passed on to the next operator in the chain or to

86
00:06:34,940 --> 00:06:35,750
the observer.

87
00:06:36,080 --> 00:06:41,870
Therefore, the observer never has to care about subscribing to multiple observables.

88
00:06:42,170 --> 00:06:46,370
These subscriptions are handled from the pipeline rather than the observer.

89
00:06:46,970 --> 00:06:53,630
Our SJS ships with a couple of flattening operators, they are very similar to one another with slight

90
00:06:53,630 --> 00:06:54,530
differences.

91
00:06:54,860 --> 00:07:00,350
Let's learn how we could fix our problem with these operators in the next few lectures.