1

This is a question asked in the RXJS Gitter channel but no one answers it so I post it here, hoping to have an explanation.

Hi everyone,

I am a Java developer who tries to learn rxjs. I have a dumb question about an Observable declaration. To make my life easier I told myself that working with Observable is like working with the Java Stream api (even if Stream is a pull base model). The example that disturbes me is this one: In java I have

Integer[] intArray = new Integer[] {1, 2, 3, 4, 5};
Stream<Integer> stream = Arrays.stream(intArray); // Here we have a stream of Integer not a Stream of Integer[], the array is flatten

With rxjs if I do this:

const intArray = [1, 2, 3, 4, 5]
const intObs: Observable<number> = of(intArray); // The compiler complains, I have to change Observable<number> to Observable<number[]>

It's a bit disturbing, why the of(...) method does not flat the array? Also, if we subscribe to an observable of Observable<number[]> why the received values are not of type number[] but of type number? I am a bit confused. Thanks for some explanation

Improve this question

2 Answers 2

Reset to default
3

RxJS # of

The RxJS of creation-operator takes a list of values and turns them into an Observable that emits that list and completes. It doesn't perform any checks/transformations for you.

This should work as expected:

const intObs: Observable<number> = of(1, 2, 3, 4, 5);

You can also use the spread operator to similar effect:

const intArray = [1, 2, 3, 4, 5];
const intObs: Observable<number> = of(...intArray);

RxJS # from

Perahps a better solution is the RxJS from creation-operator which doesn't take values, but rather takes anything that's seen as an ObservableInput (Any iterable, promise, or observable). Actually, any ES6 Iterable, so Arrays, Generators, Maps, HashMaps, Vectors, custom iterables, you name it. They'll all work.

Since an array is an ES6 Iterable, the following should work:

const intArray = [1, 2, 3, 4, 5];
const intObs: Observable<number> = from(intArray);
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks for these explanations, there is an error in the of part.
@akuma8 It compiles and works just fine for me, what error did you spot?
The error is here: ` const intArray = [1, 2, 3, 4, 5] const intObs: Observable<number> = of(intArray); // it should be const intObs: Observable<number[]> `
Otherwise we have TS2322: Type 'Observable<number[]>' is not assignable to type 'Observable<number>'.   Type 'number[]' is not assignable to type 'number'.
You need to destructure the array into a list as mentioned. The list is then made up of numbers, there's no more array of numbers. This is why I said "you can use the spread operator to similar effect." It's not an error, look closely please, it needs to be written as of(...intArray)
|
2

I don't know anything about Java but in RxJS the generic type of Observable means what data type is this Observable going to emit (data type of each individual next emission). So Observable<number> means and Observable that emits only numbers. On the other hand Observable<number[]> means an Observable that emits arrays of numbers.

In RxJS of() only takes the value (or values) you pass as argument(s) and emits them as next emissions. It doesn't care what data type it is, no further logic is involved (what if you do want to emit an array of values of([1, 2, 3]) and of() would keep flattenign them?).

In order to create an Observable from an array (an Observable that emits array items) you can use RxJS from() method:

from([1, 2, 3]).subscribe(...); // Will receive 3 `next` values.
Improve this answer

2 Comments

Thanks. So if I want an Observable of array I should use of(...) and use from if I want the array to be flatten?
Yes. Technically, you could use of(...array) to expand individual emission but it makes more sence to use from(array)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.