ionic 4 – How to wait for two observables to be subscribed before getting data


I’m accessing this route fine:


Now I’m in trouble on how to handle two subscribers at the same time.

The first subscriber loads the questions array from the external service.

The second one gets the desired Question object according to the route param.


ngOnInit() {
  this.appService.app_data.subscribe((v) => { this.app_data = v; });

  this.route.queryParams.subscribe(p => {
    this.question = this.appService.app_data.questions.find(i => ===;

The problem is that when I open this route, it tries to filter the array which is still not loaded by the service.

ERROR TypeError: Cannot read properties of undefined (reading ‘find’)

Am I doing something wrong?


Would suggest using combineLatest rxjs operator to combine multiple observables and take the last emitted value.

When any observable emits a value, emit the last emitted value from each.

import { combineLatest } from 'rxjs';

combineLatest([this.appService.app_data, this.route.queryParams]).subscribe(
  ([appData, param]) => {
    this.app_data = appData;
    this.question = appData.questions.find((i) => ===;

Demo @ StackBlitz


forkJoin aims to wait for all the Observables to be completed first then only emit their last emitted value for each observable. However route.params, route.queryParams observables will never be completed, thus forkJoin is not working in this scenario.

Answered By – Yong Shun

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published