Angular call function with promise in typescript

Question

I have 3 functions. And I want to call the other function after a function is completed. In my first function, I am setting a variable(students) in the page. And the second function uses that variable. So I am using promise. But I tried a lot of ways. But I can't execute the code with promise. I want, in my buttonClick, my three functions should work orderly async. I want like below. How can I do?

  students: [];
  studentInfoList: [];
  otherList: [];

  buttonClick() {
    const myPromise = new Promise(function (resolve, reject) {
      myFirstOperation();
    });

    myPromise()
      .then(result => {
        mySecondOperation();
      })
      .then(result => {
        myThirdOperation();
      });
  }


  myFirstOperation() {
    this.studentService.getStudents().subscribe(
      result => {
          this.students = result.data;
      });
  }

  mySecondOperation() {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
    }
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }
  }

Sachin Shah · Accepted Answer · 2018-09-27 12:42:31Z

4

Try this way.

student = [];
studentInfoList = [];
otherList = [];

this.buttonClick().then(() => {
  this.buttonClickResult().then((data) => {        
    this.secondFunction().then(() => {
        this.thiedFunction();
    });
  });
})    

 buttonClick(){    
    return new promise((resolve , reject) => {
     // Do your stuff hear
    })
  }

buttonClickResult(){    
  return new promise((resolve , reject) => {
    this.studentService.getStudents().subscribe((result) => {
        this.student.push(...result.data);
        resolve("pass data hear"); // Pass data if you need.                                                               
    })
  })
}

secondFunction(){    
  return new promise((resolve , reject) => {
    for (let data of this.student) {
        this.studentInfoList.push({ "studenNameSurname" : data.Name + data.Surname });
    }
  })
}

thiedFunction(){
   this.otherList.push(...this.studentInfoList); 
}

edited Sep 27, 2018 at 12:42

answered Sep 27, 2018 at 9:47

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

realist Over a year ago

It didn't work @SachinShah. It worked by this order: buttonClick=>secondFunction=> thirdFunction =>buttonClickResult. But i want buttonClick => buttonClickResult.=>secondFunction=> thirdFunction.

Sachin Shah Over a year ago

@HasanOzdemir I have update my answer as per your flow. Please check it.

realist Over a year ago

Thanks for your reply @SachinShah . But this will not work because of function not call resolve function. I added working answer

Sachin Shah Over a year ago

@HasanOzdemir As you say , you need to pass resolve, So I have update my answer and I have set it in only one function. So based on that you can set in other functions too.

Kruti Choksi Patel · Accepted Answer · 2018-09-27 12:20:44Z

1

students: [];
studentInfoList: [];
otherList: [];

buttonClick() {
    this.myFirstOperation()
        .then(() => {
            this.mySecondOperation();
            this.myThirdOperation();
        })
}


myFirstOperation() {
    new Promise((resolve, reject) => {
        this.studentService.getStudents().subscribe(
            result => {
                this.students = result.data;
                resolve();
            });
    })

}

mySecondOperation() {
    for (let student of this.students) {
        this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
    }
}

myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
        this.otherList.push(this.studentInfoList);
    }
}

edited Sep 27, 2018 at 12:20

answered Sep 27, 2018 at 11:57

Kruti Choksi Patel

4193 silver badges6 bronze badges

3 Comments

realist Over a year ago

Thanks for your reply @KrutiChoksiPatel. But this will not work because of function not call resolve function. I added working answer.

Kruti Choksi Patel Over a year ago

Yes you are right I will edit it thanks. In your answer mySecondOperation have promise but it not required as it is simple for loop. No need of promise.

realist Over a year ago

Yes. I wrote third function only for example. I wrote for someone who looking for three async function. You can assume second function also like async.

tano · Accepted Answer · 2018-09-27 09:14:47Z

0

You can use async/await

students: [];
  studentInfoList: [];
  otherList: [];

  async buttonClick() {
        await this.myFirstOperation();
        this.mySecondOperation();
        this.myThirdOperation();
  }


 async myFirstOperation() {
    const result = await this.studentService.getStudents().toPromise();
    this.students = result.data;

  }

  mySecondOperation() {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNAmeSurname=student.Name + student.Surname });
    }
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(studentInfoList);
    }
  }

answered Sep 27, 2018 at 9:14

tano

2,8271 gold badge18 silver badges17 bronze badges

1 Comment

realist Over a year ago

Thanks for your reply. But, my application is used by a lot of people. So, some of them can have old browser. And async/await doesn't work on old browser. So, i want to use promise because of working on both old and new browser. @tano

sloth · Accepted Answer · 2018-09-27 09:20:34Z

0

mySecondOperation and myThirdOperation don't do anything async, so you can just write

buttonClick() {
    this.studentService.getStudents().subscribe(
          result => {
              this.students = result.data;
              for (let student of this.students) {
                    this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
              }
              for (let studentInfo of this.studentInfoList) {
                    this.otherList.push(this.studentInfoList);
              }
          });
}

answered Sep 27, 2018 at 9:20

sloth

101k21 gold badges182 silver badges224 bronze badges

2 Comments

realist Over a year ago

Please suppose that second and third function async. I gave only example. @sloth

sloth Over a year ago

@HasanOzdemir then please edit your question. To those function return something, like an Observable or Promise? Do they need the data gathered in the previous methods?

realist · Accepted Answer · 2018-09-27 12:14:55Z

I found the solution. @KrutiChoksiPatel 's and @SachinShah 's answer is very near to my answer. But they won't work. Because in that answer, there is no "resolve()" function like below.

 buttonClick() {
    this.myFirstOperation().then(() => {
      this.mySecondOperation(() => {
        this.myThirdOperation();
      });
    });
  }

  myFirstOperation() {
    return new Promise((resolve, reject) => {
      this.studentService.getStudents().subscribe(
        result => {
          this.students = result.data;
          resolve(); //This row is important. Because of not working
        });
    })
  }

  mySecondOperation() {
    return new Promise((resolve, reject) => {
    for (let student of this.students) {
      this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
      }
      resolve();  //This row is important. Because of not working
    })
  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }
  }

Eduardo Villalobos · Accepted Answer · 2018-09-27 12:17:21Z

0

Maybe you need to create 2 Promises. Try this

  students: [];
  studentInfoList: [];
  otherList: [];

  buttonClick() {

    const myPromise = new Promise(function (resolve, reject) {
     this.studentService.getStudents().subscribe(
      result => {
          this.students = result.data;
          resolve();
      });
    });

    myPromise()
      .then(result => {
        mySecondOperation();
      });
  }

  mySecondOperation() {

     const my2Promise = new Promise(function (resolve, reject) {
        for (let student of this.students) {
          this.studentInfoList.push({ studenNameSurname=student.Name + student.Surname });
        }
          resolve();
     });

     my2Promise()
      .then(result => {
        myThirdOperation();
      });

  }

  myThirdOperation() {
    for (let studentInfo of this.studentInfoList) {
      this.otherList.push(this.studentInfoList);
    }

}

answered Sep 27, 2018 at 12:17

Eduardo Villalobos

1512 bronze badges

1 Comment

realist Over a year ago

I found solution and added. Thanks for your reply.

Collectives™ on Stack Overflow

Angular call function with promise in typescript

6 Answers 6

4 Comments

3 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related