Promise resolve returning undefined when value needed

Question

When the page loads, I want to get the page status and employee that is logged in so that info can be used to pull all the orders based on that given data. The problem is that regardless of what I seem to do the function: loadLoggedUser() returns the active employee too late. My 'console.log()' functions currently throughout come up with this output on page load:

resolve one: undefined 
resolve two: 3 
id when needed: undefined 
data: 1 

Here are the functions within the component, the desired order I am trying to achieve is: loadLoggedUser() then loadSelectedStatus() then once both have completed the if statement can decide which function to fire based on the info collected from the other two functions.

export class OrdersComponent implements OnInit {
  activeUser = new Employee();

  constructor( public user: Employee ) {}

  ngOnInit(): void {
    this.initializePageData();
  }

  public initializePageData() {
    var self = this;
    this.loadLoggedUser()
      .then(function(resolve) {
        console.log(`resolve one: ${resolve}`);
        self.loadSelectedStatus()
          .then(function(resolve) {
            console.log(`resolve two: ${resolve}`);
            console.log(self.activeUser.id);
            if (self.selectedViewNumber == 2) {
              self.loadOrdersBySalesperson(self.activeUser.id);
            } else {
              if (self.selectedViewNumber == 3) { 
                self.loadOrdersByStatus(self.selectedStatus, 0);
              } else {
                self.loadOrdersByStatus(self.selectedStatus, self.activeUser.id);
              }
            }
          })
      });
  }

These are the four function definitions for the functions used within initizlizePageData():

  public async loadLoggedUsername() {
    return new Promise<string>((resolve, reject) => {
      var loggedUsername = this.employeeService.getLoggedUsername();
      resolve(loggedUsername);
    });
  }

  public async loadLoggedUser() {
    var self = this;
    this.loadLoggedUsername().then(function(res) {
      var loggedUsername = res;
      return new Promise<any>((resolve, reject) => {
        self.employeeService.getEmployeeByUsername(loggedUsername).subscribe(data => {
          self.activeUser = data;
          console.log(`data: ${data.id}`);
          resolve(data.id);
        });
      });
    });
  }

  public async loadSelectedStatus() {
    return new Promise<number>((resolve, reject) => {
      this.activatedRoute.queryParams.subscribe(params => {
        this.selectedStatus = params['status'];

        if (!this.selectedStatus) {
          this.selectedStatus = 3; 
        }
        resolve(this.selectedStatus);
      });
    });
  }

  public loadOrdersByStatus(selectedStatus: number, userId: number) {
    this.orderService.getOrdersByStatus(selectedStatus, userId).subscribe(res => {
      this.ordersArray = res;
    });
  }

  public loadOrdersBySalesperson(userId: number) {
    this.orderService.getOrdersBySalesperson(userId).subscribe(res => {
      this.ordersArray = res;
    });
  }
}

Any input or feedback is greatly appreciated.

Answer 1

You are missing a return keyword in your loadLoggedUser() function.

Change the statement

this.loadLoggedUsername().then(function(res) { ... 

to

return this.loadLoggedUsername().then(function(res) { ...