What is the best way to streamline the response with RxJs?

Question

What is the best way to streamline the response with RxJs?

At this moment, I am using the following code for the operation mentioned in the title:

from(["url_1", "url_2"])
  .pipe(
    concatMap(url => this.vocabularyService.getSimilarProducts(url)
      .pipe(concatMap(x => x.items))
    ),
    toArray()
  )
  .subscribe(res => console.log(res));

This code works by making an API call for each URL in the array of URLs, returning a response similar to this:

class Response {
   items: Object[]
}

Upon receiving the response, another concatMap() is used to retrieve each item in the items array and ultimately flattening them into a single array with toArray(), finally logging it into the console.

I'm curious if RxJs provides any specific operator for handling this process more efficiently, perhaps without the need for multiple nested concatMap() operators?

javascript typescript rxjs

Answer 1

Answer №1

If you want to compress the array, you can utilize the reduce method.

import { Component } from "@angular/core";
import { from, of } from "rxjs";
import { concatMap, reduce } from "rxjs/operators";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  subscriber = {
    next: (i) => console.log(i),
    complete: () => console.log('end'),
  };

  ngOnInit() {
    from(['url_1', 'url_2'])
      .pipe(
        concatMap((url) =>
          of({
            items: [1, 2, 3],
          })
        ),
        reduce((acc, one) => {
          acc.push(...one.items);
          // eliminate all duplicates!
          return [...new Set(acc)];
        }, [])
        // shorter version
        // reduce((acc, one) => [...acc, ...one.items], [])
      )
      .subscribe((res) => console.log(res));
    // Check the console at the bottom right corner for results.
  }
}

Check out stackblitz

Answer 2

If you want to compress the array, you can utilize the reduce method.

import { Component } from "@angular/core";
import { from, of } from "rxjs";
import { concatMap, reduce } from "rxjs/operators";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  subscriber = {
    next: (i) => console.log(i),
    complete: () => console.log('end'),
  };

  ngOnInit() {
    from(['url_1', 'url_2'])
      .pipe(
        concatMap((url) =>
          of({
            items: [1, 2, 3],
          })
        ),
        reduce((acc, one) => {
          acc.push(...one.items);
          // eliminate all duplicates!
          return [...new Set(acc)];
        }, [])
        // shorter version
        // reduce((acc, one) => [...acc, ...one.items], [])
      )
      .subscribe((res) => console.log(res));
    // Check the console at the bottom right corner for results.
  }
}

Check out stackblitz

What is the best way to streamline the response with RxJs?

Answer №1

Similar questions

Ways to continuously monitor a div for a specific class

Tips for accessing the 'Show More' feature on a webpage with lazy loading functionality

Is there a way to utilize flex or other CSS properties to wrap element content onto the next line, beginning from the start of its container?

Is it possible to render the v-for value dynamically?

If the token is null, my intention is to return to the sign-up page, but unfortunately, I am unable to redirect the page back

Top method to incorporate status verification with javascript

Tips for avoiding node js from exposing .git directories and its contents

The VueJs input file @change event only triggers once in Chrome after the first call

Browsing through a collection of JSON objects with a user interface

Stop GIFs from playing automatically

Having trouble with rendering components in React and Bootstrap?

What is the best way to direct a Node server to serve an index file located one directory above?

Encountering an issue while attempting to send a POST response through Node Express, specifically an error related

Instructions for returning a function from within another function and then displaying it upon return

No element found with the specified exportAs value of "ngForm" on the <form> tag

Deactivating multiple buttons in JavaScript after a single click: A guide

Employing identification as a variable

Tips for validating a text input field depending on the selected value in a dropdown menu using AngularJS

injectIntl requires a component with props containing the `intl` attribute

Issue: The text.replace function is not working in an AngularJS filter. What steps can be taken to resolve this?