Angular and RxJs combine two http requests

Question

I am making two http requests, each return a observable<IProduct>; and I want to combine both into a local object and use the async pipe to bring values from each.

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

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


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

This issue I'm getting, I don't know what type combinedProds$ should be.

Define an interface called, may-be IProductPair and map to that type. — fahadash
– fahadash, Commented Aug 20, 2019 at 14:45

Christian Phillips · Accepted Answer · 2021-12-01 14:36:55Z

9

Maybe forkJoin is the one you are looking for ?

forkJoin work best with Http call and I'm using it a lot when dealing with http request

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

/*
  when all observables complete, provide the last
  emitted value from each as dictionary
*/
forkJoin(
  // as of 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 return an Observable<any> so you can change your like this

combinedProds$: Observable<any>

edited Dec 1, 2021 at 14:36

Christian Phillips

18.8k8 gold badges55 silver badges85 bronze badges

answered Aug 20, 2019 at 14:40

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Christian Phillips Over a year ago

Thanks for the reply, the issue I'm getting, what type should the combinedProds$ variable be?

Christian Phillips Over a year ago

observable<any> works, but I'd have thought something like observable<IProduct[]> would work here too, if I wanted to 'strongly type' it?

Tony Over a year ago

Yes I understand but the forkJoin return an array of Observable

Christian Phillips Over a year ago

This works :) If I get the type solved, I will post an update here. Thanks again.

Collectives™ on Stack Overflow

Angular and RxJs combine two http requests

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related