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);
    }
  }

Answer 1

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); 
}

Answer 2

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);
    }
}

Answer 3

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);
    }

}

Answer 4

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);
    }
  }

Answer 5

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);
              }
          });
}

Answer 6

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);
    }
  }