wait for http success before looping back - Angular 4

Question

Would appreciate any help in debugging the problem below.

Current State

// Iteration #1 ( Logs )

index =  0
id = 0, deleted = 0
userIdfaList:: A,B,C,D

// after success
id --->  33
response::  Object {id: 33, name: "Test", deleted: 0, userIdfaList: Array(4)}

// Iteration #2 ( Logs )

index =  1
id = 0, deleted = 0
userIdfaList:: AA,BB,CC,DD

// after success
id --->  35
response::  Object {id: 35, name: "Test", deleted: 0, userIdfaList: Array(4)}

// Iteration #3 ( Logs )

index =  2
id = 0, deleted = 0
userIdfaList:: AAA,BBB,CCC,DDD

// after success
id --->  34
response::  Object {id: 34, name: "Test", deleted: 0, userIdfaList: Array(4)}

Expected Behavior

Once the id is retrieved in response from the first success, assign that id to the rest of the batches.

// Iteration #1 ( Logs )

index =  0
id = 0, deleted = 0
userIdfaList:: A,B,C,D

// after success
id --->  33
response::  Object {id: 33, name: "Test", deleted: 0, userIdfaList: Array(4)}

// Iteration #2 ( Logs )

index =  1
id = 33, deleted = 0
userIdfaList:: AA,BB,CC,DD

// after success
id --->  33
response::  Object {id: 33, name: "Test", deleted: 0, userIdfaList: Array(4)}

// Iteration #3 ( Logs )

index =  2
id = 33, deleted = 0
userIdfaList:: AAA,BBB,CCC,DDD

// after success
id --->  33
response::  Object {id: 33, name: "Test", deleted: 0, userIdfaList: Array(4)}

component.ts

userAudience(name, userIdfaListArray){
    let id = null,
        deleted = null;
    for (let i=0;i<userIdfaListArray.length;i++){
        console.log("index = ", i);
        if (i == 0){ id = deleted = 0; }
        console.log(`id = ${id}, deleted = ${deleted}`);
        let userIdfaList = userIdfaListArray[i];
        console.log(`userIdfaList:: ${userIdfaList}`);
        this._audienceService.uploadMobileAdIds(id, name, deleted, userIdfaList)
        .subscribe(
            data => {
                if ( data.status === 'success' ) {
                    id = data.response.id;
                    console.log("id ---> ", id);
                    console.log("response:: ", data.response);
                    this.batchIds.push(data.response.userIdfaList);
                } else {
                    console.log(`errorcode: ${data.errorcode}`);
                    console.log(`error message: ${data.message}`);
                }
            },
            error => error.status
        );
    }
}

Answer 1

make the observable object separate from the for loop. Since observable use to handle the asynchronous data stream at the time event subscribe for loop might be already executed. So in order to prevent this create a separate function and call it inside the for loop

userAudience(name, userIdfaListArray) {
    let id = null,
        deleted = null;
    for (let i = 0; i < userIdfaListArray.length; i++) {
        console.log("index = ", i);
        if (i == 0) {
            id = deleted = 0;
        }
        console.log(`id = ${id}, deleted = ${deleted}`);
        let userIdfaList = userIdfaListArray[i];
        console.log(`userIdfaList:: ${userIdfaList}`);

        this.callAudience(userIdfaLis)

    }

    callAudience(userIdfaLis) {
        this._audienceService.uploadMobileAdIds(id, name, deleted, userIdfaList)
            .subscribe(
                data => {
                    if (data.status === 'success') {
                        id = data.response.id;
                        console.log("id ---> ", id);
                        console.log("response:: ", data.response);
                        this.batchIds.push(data.response.userIdfaList);
                    } else {
                        console.log(`errorcode: ${data.errorcode}`);
                        console.log(`error message: ${data.message}`);
                    }
                },
                error => error.status
            );
    }
}