Wait for several rxjs observable inside foreach till finished to execute another

Issue

• I want to loop trough the checked_checkboxes values.
• foreach ones I want to do a POST request.
• Then when all the POST request inside the foreach was done I want to GET the data just queried.

Problem:

• my get function is separate from my post function so the post query didn't finished and it did the get so it resulted in an empty get because the post wasn't yet posted.

Solution:

add the observables into array and then put them in the forkJoin at the end of the foreach.

What I've seen possible :

• transform observable into promise and then use async await, not much comfortable with this
• can use forkJoin operators to execute some observables and wait for all them done.

My API service returns RxJs observables, I'm in Angular 8 and here are the two functions:
First is AddVacation() which will POST some data and then the getAgentsInSfihtDispo() will get the data posted.

addVacation() {
    let counter = 0;
    const shift_id = this.selectedShiftForMaincouranteModify;
    const shift_date = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
    this.api.sendGetRequest("/api/shift_dates/" + shift_date, true, null, null)
        .subscribe((data) => {
            this.agents_dispo_checked.forEach((agent) => {
                const agent_id = agent.id;
                if (data) {
                    this.api.sendPostRequest('/api/shift_dos', true, null,
                        { shift_id: shift_id, shift_date: shift_date, agent_id: agent_id })
                        .subscribe();
                } else {
                    this.api.sendPostRequest("/api/shift_dates", true, null, { date: shift_date })
                        .subscribe((data3) => {
                            if (data3.error === "L'association existe deja dans la base de données") {
                                this.api.sendPostRequest('/api/shift_dos', true, null,
                                    { shift_id: shift_id, shift_date: shift_date, agent_id: agent_id })
                                    .subscribe();
                            } else {
                                this.api.sendPostRequest('/api/shift_dos', true, null,
                                    { shift_id: shift_id, shift_date: data3.date, agent_id: agent_id })
                                    .subscribe();
                            }
                        });
                }
                counter++;
            });
            if (this.agents_dispo_checked.length === counter) {
                this.isOpenSaisieVacation = false;
                this.getAgentsInShiftAndDispo();
            }
        },
    (err) => console.error(err));
}

getAgentsInShiftAndDispo() {
    this.agentsInShift = [];
    this.agents_dispo = [];
    this.agentsInShiftSelectedFormArray.clear();
    this.agentsDispoFormArray.clear();
    if (this.selectedShiftForMaincouranteModify !== 0 &&
        (this.modifyForm.controls.dateDeb.value !== "" || this.modifyForm.controls.dateDeb.value !== null || this.modifyForm.controls.dateDeb.value !== undefined)) {
        const shift_id = this.selectedShiftForMaincouranteModify;
        const goodFormatDate = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
        this.api.sendGetRequest('/api/shift_dos/byShiftAndDate/' + shift_id + "/" + goodFormatDate, true, null, null)
            .subscribe((data) => {
                if (data) {
                    data.forEach((item) => {
                        this.agentsInShift.push(item.agent);
                    });
                }
            }, (err) => console.error(err),
            () => {
                this.agentsInShift.map((o, i) => {
                    const control = new FormControl(true); // if first item set to true, else false
                    this.agentsInShiftSelectedFormArray.push(control);
                });
                const difference = this.agentsMaintenance.filter((obj) => {
                    return !this.agentsInShift.some((obj2) => {
                        return obj.id === obj2.id;
                    });
                });
                this.agents_dispo = difference;
                this.agents_dispo.map((o, i) => {
                    const control = new FormControl(false); // if first item set to true, else false
                    this.agentsDispoFormArray.push(control);
                });
            });
    }
}

Thanks in advance to steer me in the large world of RxJs operators.

Solution

You will have to push all the Observables into an array, and use the forkJoin.

private observables = [];

addVacation() {
    let counter = 0;
    const shift_id = this.selectedShiftForMaincouranteModify;
    const shift_date = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
    this.api.sendGetRequest("/api/shift_dates/" + shift_date, true, null, null)
        .subscribe((data) => {
            this.agents_dispo_checked.forEach((agent) => {
                const agent_id = agent.id;
                if (data) {
                    this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
                        { shift_id: shift_id, shift_date: shift_date, agent_id: agent_id }));
                } else {
                    this.observables.push(this.api.sendPostRequest("/api/shift_dates", true, null, { date: shift_date })
                        .subscribe((data3) => {
                            if (data3.error === "L'association existe deja dans la base de données") {
                                this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
                                    { shift_id: shift_id, shift_date: shift_date, agent_id: agent_id }));
                            } else {
                                this.observables.push(this.api.sendPostRequest('/api/shift_dos', true, null,
                                    { shift_id: shift_id, shift_date: data3.date, agent_id: agent_id }));
                            }
                        });
                }
                counter++;
            });
            if (this.agents_dispo_checked.length === counter) {
                this.isOpenSaisieVacation = false;
                forkJoin(this.observables)
                  .subscribe(val => this.getAgentsInShiftAndDispo());
            }
        },
    (err) => console.error(err));
}

getAgentsInShiftAndDispo() {
    this.agentsInShift = [];
    this.agents_dispo = [];
    this.agentsInShiftSelectedFormArray.clear();
    this.agentsDispoFormArray.clear();
    if (this.selectedShiftForMaincouranteModify !== 0 &&
        (this.modifyForm.controls.dateDeb.value !== "" || this.modifyForm.controls.dateDeb.value !== null || this.modifyForm.controls.dateDeb.value !== undefined)) {
        const shift_id = this.selectedShiftForMaincouranteModify;
        const goodFormatDate = this.modifyForm.value.dateDeb.format('YYYY-MM-DD');
        this.api.sendGetRequest('/api/shift_dos/byShiftAndDate/' + shift_id + "/" + goodFormatDate, true, null, null)
            .subscribe((data) => {
                if (data) {
                    data.forEach((item) => {
                        this.agentsInShift.push(item.agent);
                    });
                }
            }, (err) => console.error(err),
            () => {
                this.agentsInShift.map((o, i) => {
                    const control = new FormControl(true); // if first item set to true, else false
                    this.agentsInShiftSelectedFormArray.push(control);
                });
                const difference = this.agentsMaintenance.filter((obj) => {
                    return !this.agentsInShift.some((obj2) => {
                        return obj.id === obj2.id;
                    });
                });
                this.agents_dispo = difference;
                this.agents_dispo.map((o, i) => {
                    const control = new FormControl(false); // if first item set to true, else false
                    this.agentsDispoFormArray.push(control);
                });
            });
    }
}

Answered By - yazantahhan