Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

494
Views
Javascript - AJAX Class Method cannot invoke other class methods from within the 'Success' function?

I have two classes: "Company" and "Employees".

I've created all the "Company" objects already, and now I want to create all the "Employee" objects. Since I need to make an Ajax call to get the employee data, and then associate each employee with the company they work for, my approach is as follows:

  1. Create a Company class method that makes the Ajax call getEmployeeData. This will run as a click event listener attached to each company box, so a user will see the company's employees when they click on the company box.
  2. From the Ajax call 'success' method, call another class method populateEmployees(ajaxResult), passing in the data from our API call.
  3. As employee objects are instantiated, they will be added to the associated company's list of employees this.employees = [];. That's why we're doing all this as class methods in the Company class.

Ok -- now for some reason, when I try to execute step #2, it fails and says this.populateEmployees is not a function. My first thought was that it must be a scoping issue, that the 'success' method in the ajax call couldn't access the other class methods...but that doesn't make any sense since i'm using lexical scoping. What's more, I've used this pattern several times before and it's always worked. I'm even looking at other examples of this in my code for other projects, and it all works, so I can't figure out why I'm getting this error now. See below for code (simplified for brevity)

class Employee {
  constructor(employeeOptions) {
    this.name = employeeOptions.name;
    this.company = employeeOptions.company;
  }
}

class Company {
  constructor(companyOptions) {
    this.companyName = companyOptions.companyName;
    this.employees = [];
    this.newCompanyBoxElement = document.createElement("div");
  }
  attachEventListeners(){
    this.newCompanyBoxElement.addEventListener("click", 
    this.getEmployeeData);
  }
  getEmployeeData() {
    //send the request to the server and process the results
    $.LoadingOverlay("show");
    $.ajax({
      type: "GET",
      url: getURL,
      dataType: "JSON",
      data: {
        sessionToken: sessionToken,
        subjectId: subjectId,
        resolveType: false,
      },

      // process the returned result of the Ajax call
      success: (ajaxResult) => {
        // Call function to populate triggered filter boxes
        // !! this is where things break
        this.populateEmployees(ajaxResult);
      },
      complete: () => {
        // Hide loading overlay
        $.LoadingOverlay("hide");
      },
      //handle failure
      error: (error) => {
        console.log(error);
      },
    });
  }

  // Function to populate employee objects, invoked by the API call above
  populateEmployees(ajaxResult) {
    // instantiate objects
    console.log("populate employees function");

    for (let item of ajaxResult) {
      let newEmployee = new Employee({
        name: item.name,
        company: this.companyName,
      });
      // Add employee to array of employees associated with company
      this.employees.push(newEmployee);
    }
  }
}


over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!