subscribe function doesn't work correctly

Question

in this piece of code the subscribe function executes after the last line in loadFromDB function:

  loadFromDB(){
    const loading = this.loadingCtrl.create({
      content: 'pleas wait'
    });
    loading.present();
    this.getInterviewFromDB()
      .subscribe((data) => {
        this.events = data;
        console.log( 'before');
      });
    this.getMeetingsFromDB().subscribe((data)=>{
      this.events.concat(data);
    });
    loading.dismiss();

    console.log( 'after');
  }

the loading is present and dismiss before loading any data from database and this is the output of the log

illustrates that line under the subscribe function Execute after the console.log inside it ...can any body explain to me .. ?!

It is a common problem that developers encounter with JavaScript. So you are in familiar territory. Check out https://stackoverflow.com/questions/14382567 and https://stackoverflow.com/questions/2637626 — James Lawruk, Aug 24 '17 at 17:18

score 1 · Answer 1 · answered Aug 23 '17 at 18:51

1

This makes perfectly sense. You are subscribing to asynchronous steams. You cant expect them to finish in order. If you want them to finish at the same time you can do something like this:

Observable.forkJoin(this.getInterviewFromDB(), this.getMeetingsFromDB())
    .subscribe(res => {
       let interviews = res[0];
       let meetings = res[1];
    })

answered Aug 23 '17 at 18:51

Robin Dijkhof

18,665
11
65
116

mr.Robin thanks for your caring but it still unclear to me .. can u explain it to me a bit later ?! – Tawfiek Khalaf Aug 23 '17 at 19:05
It is `RxJs`. You can read more about it there: https://github.com/Reactive-Extensions/RxJS Remember everthing is async. – Robin Dijkhof Aug 23 '17 at 19:45

score 0 · Answer 2 · 2017-08-23T20:50:40.720

This is the way callbacks work. subscribe takes a callback function as an argument. I suggest you learn what callbacks are and how they work before continuing.

Here is a little bit of information on how subscribe works: ReactiveX subscribe function

Robin provides a good solution in his answer with forkJoin. forkJoin joins the values emitted by multiple Observables into an array and creates a new Observable. You can then subscribe to this Observable, just like Robin did in his example, to get the array value which is the first argument of the callback.

subscribe function doesn't work correctly

2 Answers2

Linked