Why is there no output when using RxJS to process stream elements? How to use of and from operators correctly?

RxJS Streaming: of the correct use of from operator

When using RxJS to process data streams, it is crucial to properly select operators. This article discusses a common RxJS stream processing problem: when using of and from operators to process array elements, the output results do not meet expectations.

Problem description:

Goal: Filter out even numbers from an array containing numbers and multiply the even numbers by 2.

Error code:

 import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const e = of([1, 2, 3, 4, 5]);
e.pipe(
  filter(item => item % 2 === 0),
  map(num => num * 2)
).subscribe(v => console.log(v));

After running this code, there is no output. This is because the of operator emits the entire array [1, 2, 3, 4, 5] as a single element instead of each element in the array separately. Therefore, item received by filter and map operators is the entire array, resulting in the conditional judgment and multiplication results not meeting expectations.

Solution:

In order to emit each element in the array separately, the from operator is required. The from operator can convert an iterable object such as an array, string, and other objects into an Observable, which emits each element in the object in sequence.

Correct code:

 import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const e = from([1, 2, 3, 4, 5]);
e.pipe(
  filter(item => item % 2 === 0),
  map(num => num * 2)
).subscribe(v => console.log(v));

In this code, from([1, 2, 3, 4, 5]) converts the array into an Observable, which emits 1, 2, 3, 4, 5 in turn. filter operator filters out even numbers 2 and 4, and map operator multiplies them by 2, and the final output is 4 and 8.

Through this example, we can clearly see the difference between of and from operators when processing arrays, and how to select the correct operator to achieve the expected stream processing results. Remember, of emits a single value, and from emits each element in the iterable object.

The above is the detailed content of Why is there no output when using RxJS to process stream elements? How to use of and from operators correctly?. For more information, please follow other related articles on the PHP Chinese website!