In this lecture, we are going to learn about flattening operators for observables.
We've talked about flattening before.
It's the idea of simplifying a complex array.
Flattening the array will make things easier if we're attempting to loop through a deeply nested array.
Flattening is a concept we can apply to observables one if we're in a situation with nested observables.
Sounds crazy, right?
Believe it or not, it's a common scenario you will face with our SJS.
Creating an observable from within and observable is highly possible in our current example.
We are emitting a basic value.
We've emitted arrays, objects, numbers and strings.
But what do you think would happen if we emitted an observable?
Let's find out on our page.
We have a button.
The goal will be to initiate a request if the button is clicked.
We will begin with listening for a cookie event on the button in our script.
We are going to import the from event operator from the R x J.S. package.
Next, we will completely replace the current chain of operators with the from event operator.
It's been a while since we've used the from event operator as a reminder.
It'll create an observable from an event source.
We can wrap mouse keyboard and document events with this operator.
The first argument is the targets.
We should select the button from the document above the observable variable.
We will create another variable called button.
The value of the variable will be the document query selector function, I've already assigned an ID
to the button call button.
We can select the button in the document by its ID.
Next, we will pass on the button selection to the from event operator.
We will be listening for the click event on the button.
Let's test if our operator is working.
If we click on the button, the event object gets logged to the console.
So far, so good.
It's time to initiate a request.
There are two operators we are going to need.
First, we're going to need the map operator from the SJS operators package.
Next, we need to import the Ajax operator from the Oryx genius slash Ajax package.
We haven't had the chance to discuss the Ajax operator.
It's a special operator for initiating HTP requests.
We can perform various requests from get to post requests on our observable.
We are going to change the pipe function with the map operator.
We are adding the map operator because the Ajax operator is a creation operator.
We can't add it to the pipeline.
Instead, we need to call it from within a pipe able operator.
The map operator is considered the most appropriate operator for this scenario.
Inside the map operator, we will pass in an arrow function.
We aren't going to accept the value from the event.
It's not necessary inside the air function.
We will return the Ajax dont get JSON function.
Lastly, passing a URL or going to be using the rest API from JSON placeholder.
I'll provide a link to this service in the resource section of this lecture.
Let's try testing our button if we click on the button.
We will receive an observable in the console.
Let's break down what's going on because it can seem baffling.
The main goal is to initiate a request when a button is clicked, handling click events and performing
CPTPP requests are asynchronous operations.
We should create these events with observables, which is what we're doing in our example.
Up until now, we've been creating a single observable.
But what if we need to create a chain of observable from multiple sources?
The observable for the HTTP request shouldn't be created until the button has been clicked.
Creating observables is simple.
However, handling their output values is another story.
At the end of the day, we want the response from the request.
Therefore, we need to subscribe to two different observables.
We need to subscribe to the click event and the request.
Subscribing to the request should happen after the click occurs.
We're getting an observable because we're subscribing to the click event, but not the request.
The click event returns another observable, which is the observable for the request.
If we want the response from the request, we're going to need to subscribe to the request after we've
received the observable.
We can perform this action.
Any first subscription in the next function.
We are going to call the subscribed function on the value argument.
Next, we will log the value from the second subscription.
This time, if we click the button, we will receive the response from the second observable problem
solve, but not really.
Our code can quickly become a nightmare by constantly subscribing to observables from within an observer.
The observer shouldn't have to subscribe to multiple observables.
It should be given the value when it's ready.
That's the whole point of using our SJS.
The observer shouldn't have to care about how to retrieve the value.
It just wants to be given a value.
This problem compounds if we're creating more than two observables, the whole situation can get messy
fast.
This is where flattening operators come in to play a flattening.
Operator can subscribe to an observable emitted from within a pipeline.
If the observable emits a value, the value will be passed on to the next operator in the chain or to
the observer.
Therefore, the observer never has to care about subscribing to multiple observables.
These subscriptions are handled from the pipeline rather than the observer.
Our SJS ships with a couple of flattening operators, they are very similar to one another with slight
differences.
Let's learn how we could fix our problem with these operators in the next few lectures.