2

When I run a new JSBIN project with the following specifications:

- Utilizing Tabs: JavaScript, Console

- Adding Library: RxJS 5.0.0

And then run the following code block in the JavaScript area:

var observable = Rx.Observable.create(observer => {
  setInterval(() => {
    observer.onNext('This is the output of my async operation');
  }, 2000);
});

observable.subscribe(response => console.log(response));

The preceding code should render the following output in the console area:

"This is the output of my async operation"

Two seconds later, the console area should gain render:

"This is the output of my async operation"

However, I receive the following error:

"error"
-----------------------------
"ReferenceError: Rx is not defined
    at yivicazake.js:3:4
    at https://static.jsbin.com/js/prod/runner-3.39.12.min.js:1:13926
    at https://static.jsbin.com/js/prod/runner-3.39.12.min.js:1:10855

This is my first time pulling in RxJS as a library using JSBIN and I'm hoping someone has had experience with this particular error.

Mindsect Team
  • 2,311
  • 5
  • 29
  • 36

2 Answers2

2

I am not sure which exact version of Rxjs beta u r using, I have created a jsbin here its working fine for me http://jsbin.com/henimevepa/edit?html,js,console,output

Few things here

- instead of '.onNext' in version 5 its just '.next'
- You need to subscribe to observer to run it.
FarazShuja
  • 2,287
  • 2
  • 23
  • 34
  • Hello and thanks for the swift reply. I am currently using RxJS 5.0.0-beta.7 (the only one available for me on the site) and I have changed '.next' to 'next' and I believe my last line (observable.subscribe(...) is correct, but I cannot fully confirm this. which beta are you running? – Mindsect Team Aug 21 '16 at 15:41
  • I am using same beta7, can u share ur jsbin url? – FarazShuja Aug 21 '16 at 17:05
  • [http://www.jsbin.com/yivicazake/edit?js,console](http://www.jsbin.com/yivicazake/edit?js,console) – Mindsect Team Aug 21 '16 at 19:08
  • 1
    The issue with ur jsbin is you are attaching script files at wrong location, it must be either in head tag or body tag. You have attached it outside the body tag by mistake. See html tab. – FarazShuja Aug 21 '16 at 19:43
  • Thank you, I didn't realize that the HTML, tab was being used if I only selected JavaScript and Console tabs. I thought the JavaScript was the container or sandbox exclusively. I moved the Rx script reference to the head, instead of in the body. Thanks! Helped a lot! – Mindsect Team Aug 22 '16 at 00:55
2

I'm also learning RxJS and there are a few things to note here. Right now it's still super easy to make confusion between RxJS v4 and v5 documentation, so a few links to help:

The v5 repo is this https://github.com/ReactiveX/RxJS. The /Reactive-Extensions/RxJS is for v4. Both are still useful so if you're following courses online with v4 (there are lots of them), the migration docs will help!

This manual is very helpful and RxMarbles too.

As for your code, try this:

// create subscriber
const createSubscriber = tag => ({
    next(item) { console.log(`${tag}.next ${item}`); },
    error(error) { console.log(`${tag}.error ${error.stack || error}`); },
    complete() { console.log(`${tag}.complete`); }
});

// interval
Rx.Observable
    .interval(2000)
    .take(5)
    .subscribe(createSubscriber('This is the output of my async operation'));

Hope this helps!

rafaelbiten
  • 6,074
  • 2
  • 31
  • 36