RxJS Crash Course – do and filter Operator


.do Operator

The next operator we’re going to look at is do operator. This will allow us to execute code without affecting the underlying observable. So, we create observable of a couple of strings, and then we’ll print out their names as they first appear.

RxJS Crash Course – do and filter Operator
RxJS Crash Course – do and filter Operator

Then we’ll transform them to uppercase and then we’ll print them again. When we actually run this code you can see that it gives us a glimpse into the observable data at any given point in time.

Example of .do() function

So here we see the value and the upper case value.

.filter() operator

Now let’s take a look at filter this does pretty much what you’d expect. You give it a condition and only values meeting that condition make it through.  So, here we have an observable of a bunch of positive and negative numbers and we’ll filter it to only show the positive numbers.

So, the only value is greater than or equal to zero will be displayed and we reload the page and we only see the positive numbers.

Example of .filter function

If we flip greater than to less than then we get only the negative numbers displayed using this same example.

.first() operator

I’m going to show you the first and last operator the first operator will just take the very first element from the observable.
In this case, the first element is negative three so that’s what we see here on the screen.

.last() operator

We can also do the inverse of this with the last operator and negative two is the last element so we’ll see it updated to negative two.

See you at next session of the lecture.