Coding

THE filter() OPERATOR | RxJS TUTORIAL

  • 00:00:01 welcome to this video let's take a
  • 00:00:04 closer look at a specific rx shares
  • 00:00:06 operator for this video I picked the
  • 00:00:08 filter operator which is really
  • 00:00:10 interesting and which as the name
  • 00:00:12 implies allows us to filter out some of
  • 00:00:15 the values which are emitted by an
  • 00:00:16 observable so here we get a stream of
  • 00:00:19 data emitted by that observable and we
  • 00:00:21 get the observer with the next functions
  • 00:00:23 on and right now all values meet the
  • 00:00:26 next function in our subscription year
  • 00:00:28 of course time to stop that and to add
  • 00:00:31 our filter operator now the filter
  • 00:00:34 operator takes a function as an argument
  • 00:00:36 and this function defines whether a data
  • 00:00:40 piece one of these values is allowed to
  • 00:00:43 continue its journey or not so all
  • 00:00:46 values reach the operator of course but
  • 00:00:49 thereafter only some may get to the next
  • 00:00:52 function let's say these two the other
  • 00:00:55 don't make it through the filter because
  • 00:00:58 they don't satisfy the condition we set
  • 00:00:59 up there so these two then continue to
  • 00:01:02 the next function the rest the other
  • 00:01:04 events are just dropped now let's take a
  • 00:01:08 closer look at this in a real example in
  • 00:01:10 jsfiddle so here in jsfiddle i only have
  • 00:01:14 a script import which imports RX chairs
  • 00:01:16 from the installation page at the very
  • 00:01:18 bottom using the CDN make sure to use
  • 00:01:20 the right version there and then I want
  • 00:01:22 to use the filter function so for that
  • 00:01:25 we obviously need an observable so I
  • 00:01:28 will create a new observable and I will
  • 00:01:29 use the our X J's package observable and
  • 00:01:32 then the interval method because I want
  • 00:01:35 to emit a new ascending number every
  • 00:01:39 second let's say so I'll bring this to a
  • 00:01:41 new line this will automatically give me
  • 00:01:44 such number every second that's a very
  • 00:01:46 convenient way of creating a simple
  • 00:01:47 observable now in is observable I were
  • 00:01:51 on is observable I obviously want to
  • 00:01:52 subscribe so I can directly use it
  • 00:01:55 observable call the SUBSCRIBE method and
  • 00:01:58 pass my observer to it I could have
  • 00:02:00 stored your server in a variable before
  • 00:02:02 but I will just pass it as an object
  • 00:02:04 with the next function which obviously
  • 00:02:07 receives the value and as an hour video
  • 00:02:10 issue I just want to lock the value now
  • 00:02:12 I'll also add the error function
  • 00:02:15 here where I get any error I might
  • 00:02:18 receive and where I will then simply log
  • 00:02:21 error and then also the error object or
  • 00:02:27 whatever I get here I won't add complete
  • 00:02:29 because interval here can't be completed
  • 00:02:31 it will keep on omitting values until
  • 00:02:33 our app is done so this is our
  • 00:02:37 observable here this is our observer
  • 00:02:41 being subscribed to it now let's use the
  • 00:02:44 filter operator the filter operator
  • 00:02:47 works like that I nest it where I move
  • 00:02:51 it in between my observable and the
  • 00:02:53 SUBSCRIBE function as we do for all
  • 00:02:55 operators because they should run before
  • 00:02:57 we subscribe to it so that we subscribe
  • 00:03:00 to the changed value and now filter as
  • 00:03:03 explained gets a function where we
  • 00:03:05 receive the value and actually decides
  • 00:03:09 this function where we will soon move
  • 00:03:11 our code you want to execute you could
  • 00:03:13 pass a second argument which defines
  • 00:03:15 what this that this keyword will refer
  • 00:03:19 to inside of this function so if I pass
  • 00:03:22 this here I could ensure that if I call
  • 00:03:25 this inside of the function body I'm
  • 00:03:28 referring to this outside of it
  • 00:03:30 confusing maybe check some video
  • 00:03:33 tutorials on this and JavaScript it can
  • 00:03:36 be tricky now I don't need the second
  • 00:03:38 argument here since I won't use this
  • 00:03:40 instead all I want to do here is I want
  • 00:03:43 to return whether or not the value we
  • 00:03:46 get in this iteration in this function
  • 00:03:48 hole here should be allowed to continue
  • 00:03:51 or not therefore what filter has
  • 00:03:53 returned
  • 00:03:54 it's just drew or false and our X chess
  • 00:03:57 will do the rest if it is true our X
  • 00:04:00 chairs will use the value we passed into
  • 00:04:03 the function and allow its journey and
  • 00:04:06 if we change the value inside of this
  • 00:04:08 function that won't matter it will take
  • 00:04:11 the original value if we return false
  • 00:04:14 our x chess will drop the value so here
  • 00:04:17 I want to return well as I said true or
  • 00:04:20 false because hard-coded but that would
  • 00:04:22 be a bit boring instead since I know
  • 00:04:24 that value will be an incrementing
  • 00:04:27 integer I want to return
  • 00:04:29 in value modulus two equals zero which
  • 00:04:33 basically is a check to determine
  • 00:04:35 whether it's an even number because
  • 00:04:38 modulus gives us the remainder of
  • 00:04:40 division and if that is zero it was an
  • 00:04:43 even number if that is anything else it
  • 00:04:45 was an odd number
  • 00:04:47 if I hit control enter now we indeed see
  • 00:04:51 zero then we see two receive four we
  • 00:04:55 don't see the odd numbers and that is
  • 00:04:57 simply due to our filter also recognize
  • 00:05:00 that error isn't called for the other
  • 00:05:03 numbers otherwise you would see error or
  • 00:05:06 something on the right because it's not
  • 00:05:07 an error it's just a drop filter won't
  • 00:05:10 flow an error for any elements it
  • 00:05:13 filters out and that's the case for all
  • 00:05:14 operators they don't give us an error
  • 00:05:16 here they simply just drop the value
  • 00:05:19 that is how we can use filter and of
  • 00:05:22 course you can have way more complex
  • 00:05:25 conditions in there you could check
  • 00:05:27 anything you could do whatever you need
  • 00:05:30 to do to determine whether this value
  • 00:05:32 should be allowed to continue or not you
  • 00:05:36 don't even have to use the value in your
  • 00:05:37 condition but most of the time you will
  • 00:05:39 probably do that because why would you
  • 00:05:41 care about the value otherwise I hope
  • 00:05:44 this was helpful see you in our videos
  • 00:05:46 maybe bye