Introducing the Observable

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
Jay
~ 9 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
Joel Hooks
~ 9 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
labeeb
~ 9 years ago

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

Zach  Sosana
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
Alesei Narkevitch
~ 9 years ago

which version of Rx.js you are requiring?

kisanbhat
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
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
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 Husain
Jafar Husain(instructor)
~ 8 years ago

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

Daniel
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 Husain
Jafar Husain(instructor)
~ 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
anton
~ 7 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
Bing
~ 7 years ago

good point

Samuel Elgozi
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
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
Ferenc
~ 6 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 :)