Angular and RxJs collaborate to merge two HTTP requests

Question

Angular and RxJs collaborate to merge two HTTP requests

I am currently working on making two separate http requests, each of which returns an observable<IProduct>. My goal is to combine the results of these requests into a local object and then utilize the async pipe to display values from each.

productA$: observable<IProduct>;
productB$: observable<IProduct>;
combinedProds$: ?

this.productA$ = makeHttpRequest();
this.productB$ = makeHttpRequest();


  this.combinedProds$ = combineLatest([
  this.productA$,
  this.productB$
   ])
  .pipe(
    map(([productA, productB]) =>
      ({ productA, productB}))
  );

The current issue I am facing pertains to determining the appropriate type for combinedProds$.

javascript angular typescript ecmascript-6 rxjs

Answer 1

Answer №1

Perhaps the solution you're seeking is using forkJoin.

ForkJoin works especially well with Http calls, and it's a tool I frequently use when working with http requests.

// RxJS v6.5+
import { ajax } from 'rxjs/ajax';
import { forkJoin } from 'rxjs';

/*
  When all observables complete, provide the last
  emitted value from each as a dictionary
*/
forkJoin(
  // With RxJS 6.5+ we can use a dictionary of sources
  {
    google: ajax.getJSON('https://api.github.com/users/google'),
    microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
    users: ajax.getJSON('https://api.github.com/users')
  }
)
  // { google: object, microsoft: object, users: array }
  .subscribe(console.log);

Update:

ForkJoin returns an Observable<any>, so you can modify your code like this:

combinedProds$: Observable<any>

Answer 2

Perhaps the solution you're seeking is using forkJoin.

ForkJoin works especially well with Http calls, and it's a tool I frequently use when working with http requests.

// RxJS v6.5+
import { ajax } from 'rxjs/ajax';
import { forkJoin } from 'rxjs';

/*
  When all observables complete, provide the last
  emitted value from each as a dictionary
*/
forkJoin(
  // With RxJS 6.5+ we can use a dictionary of sources
  {
    google: ajax.getJSON('https://api.github.com/users/google'),
    microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),
    users: ajax.getJSON('https://api.github.com/users')
  }
)
  // { google: object, microsoft: object, users: array }
  .subscribe(console.log);

Update:

ForkJoin returns an Observable<any>, so you can modify your code like this:

combinedProds$: Observable<any>

Angular and RxJs collaborate to merge two HTTP requests

Answer №1

Similar questions

Guide to making a word validator using jquery

Issues encountered with my PHP code preventing jQuery AJAX post functionality

Issue encountered when attempting to import a module within the ionic framework

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

"Exploring Angular: A guide to scrolling to the bottom of a page with

Stop Form Submission in Bootstrap 5

Using FabricJS ClipTo to Set Image or SVG as Canvas Border

Even though assets are precompiled, the application is still searching for each individual JS file

Changing values in a set of text fields activate a reactive form

Determining the page's coordinates in ColdFusion

I am facing an issue with Angular 14 and Webpack 5, where certain unnecessary nodejs modules seem to be hindering me from successfully serving

The jQuery click function triggers immediately upon the loading of the page

Creating an automated scrolling feature on a webpage using Jquery and bootstrap

Caution: Refs cannot be used with function components, even when using forwardRef() with Styled Components

Facing the Challenge: Overcoming Concurrency Issues with Promises

Incorporating a stylish background image into an EJS template

Maximizing the efficiency of this JavaScript code

The Vue.js mixin is not functioning properly within the component as expected

Guide on updating second dropdown options dynamically with Angular 4 based on the selected value from the first dropdown

AngularJS framework may encounter an issue where changes in $scope data do not reflect in the view