Convert JavaScript Values to RxJS Observables
The of() operator essentially converted a list of arguments to an Observable. Since arrays are often how we structure list of things in JavaScript, we should have a way of transforming arrays into Observables.
This lesson teaches how you can convert from Arrays to Observables, from Promises to Observables, and from Iterators to Observables. We will look at the API RxJS has for doing that: from, fromPromise, and fromArray.
[00:00] When we used the of operator, we essentially gave a list of arguments to this operator. The common structure for lists in JavaScript is an array. The natural question that arises is, can we convert an array to an observable? The answer is, yes. We use an operator for that called from array.
[00:17] Instead of taking a list of arguments, it takes one argument, which is that array. If you run this, you see the values 42, 100 and 200 being delivered synchronously.
[00:28] This API is useful instead of using of in the case where you already have an array, like it's declared somewhere and you want to convert that to an observable, and it works. Besides from array, we also have similar operators in the from family. Another one is called from promise, and this is how you use it. It's also under RX Observable.frompromise, and it takes a promise as an argument only.
[00:59] Let's try using that. We can use the fetch API, which is a DOM API, and it takes a URL. Let's just use JSON. This promise will be resolved with a value, which is a response object.
[01:17] That response object has -- among other stuff -- it has status as one of the fields there. If this promise is resolved, it will give us that response object. If it's rejected or if it fails, then that will become an error in the observable, and it will be delivered here.
[01:37] If you run that, we see that the status is 204. After that, it just completed as well, because we know from promises, they can only deliver one result value which is why the observable decided, I'm going to complete, since no other values will come, anyway.
[01:55] There's another operator which we could look at, which is called simply from. This is how you use it. It's also under RX Observable.from. You can give here, an argument, and it will detect automatically if that argument is an array or a promise. We can give for instance, that array that we had before, and it still works. We can also give a promise, and it will detect that the argument was a promise. It will do the same thing that from promise did, as you can see.
[02:35] From also takes yet another type of argument, which is an iterator. If you remember the lesson about generators, we can make a generator function like this that will deliver some values -- let's say 10, 20 and 30. We then recreate the iterator by calling that generator. Then we can convert an iterator to an observable like that, and we will see those values being delivered.
[03:10] The difference is that, of course, because we converted the generator to an observable and the observable is pushed, so it means that the observable, which is the producer, will determine when those values are delivered. They are delivered synchronously. There's no way of pulling out values from an observable, because we lost that. We converted from pull to push.
[03:32] The overall lesson is, if you have other types of objects like array or promises or iterators, you can convert them to observables.