Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

501
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda