RxJS - combine transformed items onto a data flow

Question

RxJS - combine transformed items onto a data flow

Is there an operator that allows me to iterate over elements of a stream and concatenate them instead of transforming them?

Consider the following stream:

A => B => C

If I use items$.concatMap(x => f(x)), the result will be:

"f(A)" => "f(B)" => "f(C)"

Using the concat operator won't work as it doesn't receive individual elements as parameters.

What I want to achieve is:

"A" => "B" => "C" => "f(A)" => "f(B)" => "f(C)"

One way to do this is by breaking up the stream and storing it as follows:

item$ = Observable.of("A","B","C");

item$.concat(item$.map(x => f(x)));

javascript rxjs5 reactive-extensions-js

Answer 1

Answer №1

After much searching, I finally stumbled upon the perfect operator for this task (at the time of writing, it was nowhere to be found in the RxJS 5 documentation). It goes by the name of let and graciously provides the entire current observable as an argument.

item$.let(obs$ => obs$.concat(obs$.map(f));

Although it may not seem overly impressive when used as the initial operation, it becomes incredibly handy when you have other operations preceding it and wish to avoid pausing to store the stream in a local variable:

item$.debounce(1000)
     .map(z => f(z.id))
     .moreOperators(...)
     .let(obs$ => obs$.concat(obs$.map(f));

Answer 2

After much searching, I finally stumbled upon the perfect operator for this task (at the time of writing, it was nowhere to be found in the RxJS 5 documentation). It goes by the name of let and graciously provides the entire current observable as an argument.

item$.let(obs$ => obs$.concat(obs$.map(f));

Although it may not seem overly impressive when used as the initial operation, it becomes incredibly handy when you have other operations preceding it and wish to avoid pausing to store the stream in a local variable:

item$.debounce(1000)
     .map(z => f(z.id))
     .moreOperators(...)
     .let(obs$ => obs$.concat(obs$.map(f));

RxJS - combine transformed items onto a data flow

Answer №1

Similar questions

Tips for managing child records while the parent record is still being created

Utilizing JSON data to generate an HTML webpage showcasing a collection of community districts through the power of JavaScript

Is the concept of client fanout truly beneficial?

Finding the common dates between two date arrays in Node.js

Style selector for dynamic drop-down menus

Effortless 'rotational' script

What is the best way to dynamically insert an email value into a JSON file?

Unusual behavior exhibited by dynamic code in iframe

Showcase -solely one property object- from numerous property objects enclosed within an array

Save the information fetched using the 'fetch' method into a different .js document when working with React

Using JavaScript to display a line using `document.write`

Utilizing CSS transitions to smoothly adjust the width of an element until it completely fills the container div in ReactJS

problem with passing the identification number into the function

Having trouble with submitting a Vue.js form when toggling the visibility of a bootstrap panel?

Scheduling tasks for jQuery/Javascript like a Cronjob

Using Angular, implementing conditional statements within a for loop

Guide on leveraging event delegation to trigger a function depending on the id of the clicked element

Is there a way to have one element automatically expand when another is selected?

Utilizing webpack, gulp, and typescript to efficiently incorporate jQuery plugins

Managing multiple Socket.io connections upon page reload