Introducing the Observable

InstructorJafar Husain

Share this video with your friends

Send Tweet

In this lesson we will get introduced to the Observable type. An Observable is a 'collection that arrives over time'. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

Jay
~ 10 years ago

The onCompleted callback never gets called. I was expecting that to be called after subscription.dispose(). Wouldn't that need to happen for the array and observable code to be equivalent?

Joel Hooks
~ 10 years ago

You are disposing of the subscription to the Observable prior to the Observable's completion. In this case (click watching) the Observable is "infinite" and will never complete.

labeeb
~ 9 years ago

I commented out subscription.dispose(); still why onCompeleted is not called?

Zach Sosana
~ 9 years ago

Is there something I am missing? I am using node, I am able to get it viewing on my localhost but not able to get a simple alert working.

I require rx in my js file , i put that js script tag in my html

Alesei Narkevitch
~ 9 years ago

which version of Rx.js you are requiring?

kisanbhat
~ 8 years ago

rx.all.js:7631 Uncaught TypeError: Cannot read property 'addListener' of null

I am getting the above mentioned error and in HTML code I have added rx.all.js (v4.1.0) . Any idea why I am getting this error?

Tony Brown
~ 8 years ago

This course has totally changed the way I think about handling events, thank you so much for such a clear explanation of the technique.

mobility-team
~ 8 years ago

I guess it's important to notice that Array.prototype.forEach is not asynchronous, but Observable.prototype.forEach is. Or am I wrong?

Jafar Husaininstructor
~ 8 years ago

Technically it's possible for an observable to fire either synchronously or asynchronously. Overall you're right.

Daniel
~ 8 years ago

With the newer version of rxjs => https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0/Rx.min.js, it calls the onError(error) right away, even before I click on the button - it triggers on page load. Will you update your tutorial or provide an answer on why is this happening? Thank you.

Jafar Husaininstructor
~ 8 years ago

I think you will have to include a code example. There are several cosmetic differences between the version of RX used in this course and the new version of RX. The code may not work exactly as is. I will need to see your port.

anton
~ 8 years ago

This works in 5.0.1: const subscription = clicks.subscribe(function onNext(e) { alert('clicked'); subscription.unsubscribe(); }, function onError(error) { console.log('Error!'); }, function onCompleted() { console.log('done'); }); It looks like subscribe method should be used instead of forEach. In addition to this dispose method should be replaced with unsubscribe.

Bing
~ 7 years ago

good point

Samuel Elgozi
~ 7 years ago

There is one thing I'm not sure I got. The async forEach function you are talking about is not the same one we have in Array.prototype.forEach right? It is one similar to it in functionality but in the prototype of the observable object in the rxjs library.. right?

coisnepe
~ 7 years ago

This does not work, which is why it'd be nice to: 1 - Clearly state what versions of packages are used 2 - Update the course regularly...

Ferenc
~ 7 years ago

It seems in version 5.0.3 (that's what I'm testing with), the forEach method has the following form:

forEach(next: Function, PromiseCtor: PromiseConstructor): Promise

So basically it returns a promise which gets finished on completion (like the second callback in v4), and gets rejected in case of errors. So in my understanding, the example in this video could be migrated to v5 like:

Rx.Observable
  .fromEvent(btn, 'click')
  .forEach((e) => console.log('clicked'))
  .then(() => console.log('completed'))
  .catch(() => console.log('an error happened'));

Please tell me, if I got this wrong :)