How to make async requests from different services [Angular]

Question

I have got 3 services with similar methods that return data from database. I am using them in my component and want to store each data respond in corresponding component array. How do i get the rest of data from other services? I am not really familiar with forkjoin, etc. Would be nice if you give an example.

Services:

export class BrandService {
  private url: string;
  constructor(private http: HttpClient) {
    this.url = 'http://localhost:3000/brands';
  }

  public getJsonBrands(): Observable<any> {
    return this.http.get(this.url);
  }
}
__________________________________________
export class ProductService {
  private url: string;
  constructor(private http: HttpClient) {
    this.url = 'http://localhost:3000/products';
  }

  public getJsonProducts(): Observable<any> {
    return this.http.get(this.url);
  }
}
__________________________________________
export class CategoryService {
  private url: string;
  constructor(private http: HttpClient) {
    this.url = 'http://localhost:3000/categories';
  }

  public getJsonCategories(): Observable<any> {
    return this.http.get(this.url);
  }
}


Component: 

export class ProductsComponent implements OnInit {
  productList: Array<any>;
  brandList: Array<any>;
  categoryList: Array<any>;

  constructor(private productService: ProductService, private brandService: BrandService, private categoryService: CategoryService) {
   this.productService.getJsonProducts().subscribe(
     product => {
       this.productList = product;
     })

  ngOnInit() {

  }
}

_______________________________________
Code below doesnt seem to work, i keep getting console error "this.brandService.getJsonBrands is not a function"

ngOnInit() {
    forkJoin(
      this.productService.getJsonProducts(),
      this.brandService.getJsonBrands(),
      this.categoryService.getJsonCategories()
    )
      .subscribe(([res1, res2, res3]) => {
          this.productList = res1;
          this.brandList = res2;
          this.productList = res3;
          console.log(this.productList, this.brandList, this.productList);
      },
        error1 => {
          console.log(error1);
        });
  }

ForkJoin from Rxjs [link](https://www.learnrxjs.io/operators/combination/forkjoin.html) and a angular example [link](https://plnkr.co/edit/ElTrOg8NfR3WbbAfjBXQ?p=preview) — valerian Havaux, Mar 23 '19 at 16:09
Possible duplicate of [Parallel HTTP requests in Angular 4](https://stackoverflow.com/questions/46247498/parallel-http-requests-in-angular-4) — Jota.Toledo, Mar 23 '19 at 16:26
This is just lazy, if you search for "parallel http requests angular" you will find a lot of resources explaining how to do that — Jota.Toledo, Mar 23 '19 at 16:27

score 0 · Answer 1 · edited Mar 23 '19 at 18:13

You have to subscribe other service like product service and include them in providers

    constructor(private productService: ProductService,
                private brandService: BrandService,
                private categoryService: CategoryService) {
        this.productService.getJsonProducts().subscribe(product => {
          this.productList = product;
        })
        this.brandService.getJsonBrands().subscribe(brands=> {
           this.brandList = brands;
        })
        this.CategoryService.getJsonCategories().subscribe(categories=> {
           this.categoryList= categories;
        })
    }

i keep getting an "this.brandService.getJsonBrands is not a function" error — Bobby Fade, Mar 23 '19 at 16:26

score 0 · Answer 2 · edited Mar 26 '19 at 20:29

Use ForkJoin or CombineLastest from Rxjs, the difference between the two explained here : Rxjs: Observable.combineLatest vs Observable.forkJoin

ngOnInit() {
forkJoin(
      this.productService.getJsonProducts(),
      this.brandService.getJsonBrands(),
      this.categoryService.getJsonCategories() 
    )
    .subscribe(([res1, res2, res3]) => {
      this.productList = res1;
      this.brandList = res2;
      this.categoryList = res3;
    });
}

Dmitry Grinko · Answer 3 · 2019-03-23T17:01:33.077

0

You can use combineLatest or forkJoin. Usage is pretty similar. But you should unsubscribe from combineLatest unlike forkJoin.

import { Subscription, combineLatest } from 'rxjs';

sub: Subscription;
myData: any;

ngOnInit() {
  this.sub = combineLatest(
    this.brandService.getJsonBrands,
    this.productService.getJsonProducts,
    this.categoryService.getJsonCategories
  ).subscribe(([brands, products, categories]) => {
    this.myData = {brands, products, categories};
    console.log('this.myData', this.myData);
  });
}

ngOnDestroy() {
    this.sub.unsubscribe();
}

forkJoin - When all observables complete, emit the last emitted value from each.

combineLatest - When any observable emits a value, emit the latest value from each.

edited Mar 23 '19 at 17:01

answered Mar 23 '19 at 16:28

Dmitry Grinko

13,806
14
62
86

do i declare "sub" variable after the "myData"(sub:any)? – Bobby Fade Mar 23 '19 at 16:42
"Property 'sub' does not exist on type 'ProductsComponent' " and [brands, products, categories] gets "Type 'Observable' is not an array type". In the console it logs: "You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable." – Bobby Fade Mar 23 '19 at 17:00
@BobbyFade I have added- sub: Subscription. Updated answer – Dmitry Grinko Mar 23 '19 at 17:02
[brands, products, categories] this keeps getting "Type 'Observable' is not an array type" – Bobby Fade Mar 23 '19 at 17:06
@BobbyFade Change type of output in your methods - Observable to Observable. Or remove it. – Dmitry Grinko Mar 23 '19 at 17:24

How to make async requests from different services [Angular]

3 Answers3