Combining results from two streams in RXJS to create a sorted array

Question

Combining results from two streams in RXJS to create a sorted array

I currently have two different streams which I will name as follows:

const firstStream = Rx.of([
  {
    first: 'first',
  }, {
    third: 'third',
  }
]);

const secondStream = Rx.of([
  {
    second: 'second'
  }, {
    fourth: 'fourth'
  }
]);

My goal is to create a combined stream that merges the results of these two streams and sorts the output array in a specific order like this:

const resultArr = [
  {
    first: 'first',
  }, 
  {
    second: 'second'
  },
  {
    third: 'third',
  },
  {
    fourth: 'fourth'
  }
];

I attempted to use combineLatest along with the RxJS flatMap operator, but encountered issues. To play around and troubleshoot, I have provided a StackBlitz playground link here: StackBlitz

I believe there are multiple solutions to achieve this task. If anyone has suggestions or can assist me, it would be greatly appreciated :)

javascript arrays rxjs

Answer 1

Answer №1

const { source, combine } = rxjs;
const { aggregate, transform, chainMap } = rxjs.operations

const x = source(['one', 'three']);
const y = source(['two', 'four']);

const sortedMapping = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
}

combine(x, y).pipe(
  // waiting until all sources are completed,
  // combining values into an array
  aggregate((result, item) => result.concat(item), []),

  // arranging the array based on specified sorting criteria
  transform(array => array.sort((a, b) => sortedMapping[a] - sortedMapping[b])),

  // flattening the array into a sequence
  chainMap(array => array),
).subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>

Answer 2

const { source, combine } = rxjs;
const { aggregate, transform, chainMap } = rxjs.operations

const x = source(['one', 'three']);
const y = source(['two', 'four']);

const sortedMapping = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
}

combine(x, y).pipe(
  // waiting until all sources are completed,
  // combining values into an array
  aggregate((result, item) => result.concat(item), []),

  // arranging the array based on specified sorting criteria
  transform(array => array.sort((a, b) => sortedMapping[a] - sortedMapping[b])),

  // flattening the array into a sequence
  chainMap(array => array),
).subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>

Answer 3

Answer №2

When your streams need to complete first before getting the sorted value as a single output, it is recommended to use the forkJoin operator. This operator will wait for Observables to finish and then combine the last values they emitted.

const { of, forkJoin } = rxjs;
const { map } = rxjs.operators;

let a$ = of([1, 8, 10, 4]);
let b$ = of([3, 5, 43, 0]);

forkJoin(a$, b$)
  .pipe(
    map(([a, b]) => [...a, ...b]),
    map(x => x.sort((a, b) => a - b))
  )
  .subscribe(x => {
    console.log('Sorted =>', x);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>

Answer 4

When your streams need to complete first before getting the sorted value as a single output, it is recommended to use the forkJoin operator. This operator will wait for Observables to finish and then combine the last values they emitted.

const { of, forkJoin } = rxjs;
const { map } = rxjs.operators;

let a$ = of([1, 8, 10, 4]);
let b$ = of([3, 5, 43, 0]);

forkJoin(a$, b$)
  .pipe(
    map(([a, b]) => [...a, ...b]),
    map(x => x.sort((a, b) => a - b))
  )
  .subscribe(x => {
    console.log('Sorted =>', x);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>

Combining results from two streams in RXJS to create a sorted array

Answer №1

Answer №2

Similar questions

Exploring property values in an AWS CDK application using Typescript

Dealing with field errors on ajax forms in CakePHP

Trouble with the Sendhub API

JS: confidential variables (for safely transmitting a score)

My objective is to upload a video file and store it on the server using multer

Guide on how to refresh the 'id' after a set period using Ajax technology

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

Achieving this result in HTML using a jQuery accordion component

ShadowCamera is absent in Three.js

The animation in Rive feels sluggish when navigating to a page with animation in Blazor WASM, despite implementing dispose methods

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

How is it possible for TypeScript to permit an inaccurate comparison like boolean === undefined?

Switch from using a select tag to a check box to easily switch between a dark and light theme

Tips for Ensuring the Longevity of my Node.js Server

Illumination shining through the depths of three-dimensional shapes

Manipulating the Document Object Model (DOM) in Google

Encountering null values in IE8/IE7 JavaScript code

Neither Output nor EventEmitter are transmitting data

Error: Calendar tool malfunctioning within duplicated element

Why are my basic style properties not appearing correctly when I use json_encode on an array?