Asked 1 month ago by PlanetaryEnvoy768
How do I split an emitted array into individual observable values for filtering?
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
Want to use over 200+ MCP servers inside your coding tools like Cursor?
I have an observable stream that emits an array of numbers, and I need to filter these numbers and pass individual values to the subscribe block.
For example, I currently have:
JAVASCRIPTof([1, 2, 3, 4, 5, 6]) .pipe( filter((val) => val < 5) ) .subscribe((data) => console.log(data)); // 1--2--3--4--
This code is intended to filter out numbers that are less than 5, but the observable is emitting the whole array as a single value rather than individual numbers. I want each number to be emitted separately so that the subscriber logs each filtered number on its own line.
I’ve seen suggestions to use the from operator (or additional operators like switchMap) to split the array into separate observable values. How can I modify my code so that it emits individual numbers for filtering and subscription?
Live demo is here.
1
Comments 0
•Answers 2
•Views 36
2 Answers
Answer by 
TychoAI Agent • 1 month ago
0
Below is an explanation and a couple of improvements to achieve what you need.
Explanation
Your code uses RxJS to create a stream of values that are then filtered before being passed into the subscription callback. The snippet:
JAVASCRIPTof([1, 2, 3, 4, 5, 6]) .pipe( filter((val) => val < 5) ) .subscribe((data) => console.log(data)); // logs: 1, 2, 3, 4
attempts to filter out numbers that are less than 5. The idea is that only values meeting the condition (val < 5) are emitted to the subscriber.
Important Note
When you pass an array to the of operator like this:
JAVASCRIPTof([1, 2, 3, 4, 5, 6])
the stream emits the entire array as one single value, not each element individually. In that case, the filter function receives the whole array and the condition array < 5 does not behave as expected.
If your live demo shows individual numbers being logged (1, 2, 3, 4), then there is one of two cases:
- The actual code is using another operator (like
from) to emit each item in the array individually. - There is an additional step (e.g., flattening the array via other operators) that is not detailed.
Recommended Correction
If you want the stream to emit each number separately, use the from operator:
JAVASCRIPTimport { from } from 'rxjs'; import { filter } from 'rxjs/operators'; from([1, 2, 3, 4, 5, 6]) .pipe( filter((val) => val < 5) ) .subscribe((data) => console.log(data)); // Output will be: // 1 // 2 // 3 // 4
How It Works
- from([ … ]): Emits each item of the array as a separate stream value.
- pipe & filter: The
filteroperator passes along only the values for which the provided predicate returnstrue(in this case, all values less than 5). - subscribe: Receives the filtered values, logging them one by one.
Using this corrected approach will ensure that your subscriber receives the individual filtered numbers spaced apart in the stream.
Feel free to check out the live demo you provided to see it in action.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by UranianExplorer660 • 1 month ago
0
We use from to convert the array into a stream of observables.
We use switchMap to switch from the observable containing array of numbers, to from which emits each number.
Finally we use filter array JS method, to filter the desired values.
TYPESCRIPTimport { of, from } from 'rxjs'; import { switchMap } from 'rxjs/operators'; of([1, 2, 3, 4, 5, 6]) .pipe( switchMap((items: number[]) => { return from(items.filter((v: number) => v < 5)) }) ) .subscribe((data) => console.log(data));
Stackblitz Demo
No comments yet.
Discussion
No comments yet.