Tips for ensuring that .scan() aggregates only the most recent emitted array in a sequence that has not yet completed

Question

Tips for ensuring that .scan() aggregates only the most recent emitted array in a sequence that has not yet completed

I am faced with the challenge of transforming and aggregating elements in an observable array that is continuously open (network-based) and may never complete.

Currently, my code involves the following:

const numbers = [1,2,3];
const numbers$ = new Rx.Subject();

const output = numbers$
  .flatMap(n => n)
  .map(n => n*n)
  .scan((acc, x) => acc.concat([x]), [])
  .subscribe(n => { console.log(n); });

numbers$.next(numbers);

setTimeout(() => {
  numbers$.next([5,6,7])
}, 1000);

At present, multiple arrays are being emitted and the final emitted value is currently [1, 4, 9, 25, 36, 49]. However, my goal is to only square values that are part of the same input array.

In other words, I am looking for the output observable to emit two arrays: [1,4,9] and [25, 36, 49].

Does anyone have a solution to achieve this?

javascript arrays reactive-programming rxjs rxjs5

Answer 1

Answer №1

If you're searching for the solution, this could be what meets your requirements:

const result = numbers$
    .map((a) => a.map(n => n * n))
    .subscribe(n => { console.log(n); });

Note: In case you prefer not to utilize Array.map, an alternative approach using RxJS is available.

You have the option to swap out Array.map with an observable that squares the values and then compiles them into an array again. Moreover, further enhancements can be made by integrating distinct or other RxJS operators (as noted in your comment):

const result = numbers$
    .mergeMap(
        (a) => Rx.Observable.from(a)
            .map((n) => n * n)
            .reduce((acc, n) => { acc.push(n); return acc; }, [])
    )
    .subscribe(n => { console.log(n); });

Regarding the solution you provided:

const result = numbers$
    .flatMap(n => n)
    .map(n => n*n)
    .buffer(numbers$.delay(1))
    .subscribe(n => { console.log(n); });

This solution relies on timing and the reason why arrays are not merged together is due to the interval between the first next call and the second one exceeding one millisecond.

Answer 2

If you're searching for the solution, this could be what meets your requirements:

const result = numbers$
    .map((a) => a.map(n => n * n))
    .subscribe(n => { console.log(n); });

Note: In case you prefer not to utilize Array.map, an alternative approach using RxJS is available.

You have the option to swap out Array.map with an observable that squares the values and then compiles them into an array again. Moreover, further enhancements can be made by integrating distinct or other RxJS operators (as noted in your comment):

const result = numbers$
    .mergeMap(
        (a) => Rx.Observable.from(a)
            .map((n) => n * n)
            .reduce((acc, n) => { acc.push(n); return acc; }, [])
    )
    .subscribe(n => { console.log(n); });

Regarding the solution you provided:

const result = numbers$
    .flatMap(n => n)
    .map(n => n*n)
    .buffer(numbers$.delay(1))
    .subscribe(n => { console.log(n); });

This solution relies on timing and the reason why arrays are not merged together is due to the interval between the first next call and the second one exceeding one millisecond.

Answer 3

Answer №2

Here is a great resource for you: jsfiddle

const fruits = ['apple', 'banana', 'orange'];
const fruits$ = new Rx.Subject();

const result = fruits$
  .map(fruits => fruits.map(fruit => fruit.toUpperCase()))
  .scan((acc, x) => acc.concat([x]), [])
  .subscribe(fruit => { console.log(fruit); });

fruits$.next(fruits);

setTimeout(() => {
  fruits$.next(['grape', 'melon', 'kiwi'])
}, 1500);

Answer 4

Here is a great resource for you: jsfiddle

const fruits = ['apple', 'banana', 'orange'];
const fruits$ = new Rx.Subject();

const result = fruits$
  .map(fruits => fruits.map(fruit => fruit.toUpperCase()))
  .scan((acc, x) => acc.concat([x]), [])
  .subscribe(fruit => { console.log(fruit); });

fruits$.next(fruits);

setTimeout(() => {
  fruits$.next(['grape', 'melon', 'kiwi'])
}, 1500);

Tips for ensuring that .scan() aggregates only the most recent emitted array in a sequence that has not yet completed

Answer №1

Answer №2

Similar questions

Every time I attempt to reference the camera position in three.js, I am only able to access the initial position and not the present location

Storing a nested array in a database using PHP and Laravel

How can I trigger an Onclick event from an <a tag without text in a Javascript form using Selenium?

Having trouble accessing the menu in the dropdown div when clicking back?

Issues with webkit css transitions not functioning as expected

What is the best way to read a file, divide it based on specific criteria, and then save it into a list in Scala?

Ways to change user input into a string and locate the position of the first two characters

What is the best way to incorporate a vanilla javascript function into a vue.js application?

How can we modify a string that is located outside of a loop?

Is it possible to have multiple React apps (components) displayed together on a single page?

Selecting options on hover, either A or B at the least

Building a sub route in React Router v4 allows developers to efficiently organize and manage

Aggregating JSON data by comparing and combining corresponding keys

Creating evenly spaced PHP-generated divs without utilizing flexbox

The tablesort feature is experiencing difficulty sorting tables with dynamically changing content

When using an HTML dropdown select to display a list of generated users, only the value of the first user

What is the best way to implement an onclick method on a div in order to toggle the display of information

Populate the second dropdown menu with options determined by the selection in the first dropdown

Can someone explain what logForm.$invalid.$setValidity is all about?

Retrieving information from a URL stored in a JSON document