Hi,
In this section, we will continue from the last place and data is getting shipped from the node backend which will be serving movies data. When you do npm run server,
this will fetch the below data in below format. This is hosted at http://localhost:7000/api/movies
Now, let’s go ahead and fetch this data using browser’s fetch API and then combine the same with observable to get the advantage of RxJs operators. In order to do so, I will be creating a custom observable using Observable.create() method. In order to create an observable, we need to pass a function to this method. In this case, fetch will do the job. Its going to do the network fetch. Now, this function, takes one parameter, which is known as observer.
Observer, is the thing which allows us to emit new values, error out the observables or complete the observable. Therefore, observer is the one which gets implemented internally, to complete the observable. Also, observer will only be called, when we subscribe to observable. Therefore, when subscribe happens, then only observer will come into action. Below, I have pasted sample example for the same.
Having said that, If I open console now, there won’t be any activity as I haven’t subscribed that. However, Once I subscribe the same, it will start printing in console like shown below in the example.
Now, once I open the console, I can see that, values logged in successfully.
Now, let’s apply transform this data using map operator. Here, I will be creating movies$ observable based on http$ observable. In order to achieve the same, we will be using pipe operator. pipe operator is the one which enables chaining in multiple operators. In the below example, I have just taken incoming data sample and transformed the same into array of movies.
Having said that, now if I compare the output. I can see two sets of data now available one with the transformation and another one without.
Now, Let’s go ahead and make this more practical by introducing some logic around movies category. Currently, My home page looks like
Initially my component looks like
and markup goes like
Now, let’s go ahead and populate the same. In this case, I am just going to populate these arrays in the subscribe method like shown below.
Having done this, it will come like as shown below.
This is one of the ways of addressing the issue. However, in RxJs, we do have better approaches to solve this. In the next section, we will delve further and use other approaches. Till then stay tuned and happy coding.
Github link:- https://github.com/rahulsahay19/rxjs
Thanks,
Rahul Sahay
Happy Coding
