CODEWITHSUNDEEP
javascriptnode.jsangulartypescript
bojackhorseman99
bojackhorseman99

Reputation: 329

Angular page hangs probably due to high memory usage

i'm currently developing a project using Angular, MySQL, Express and Node-JS using Typescript. I have an Angular Component that what it does is that it loads a PrimeNG table with students data, that comes from an API to my Node.Js app server.

The table also has a delete and a edit option, the edit option pulls up a dialog in which the data of that certain student is loaded from the same data from the table, also on that same dialog, two dropdowns are filled with data that comes from API calls executed onInit().

My problem is that i implemented that the dropdowns filled in onInit dynamically by making API calls to my server, but when one function is called it hangs the whole app, even my computer almost hangs. I don't know how to optimize it, or if i'm doing it the wrong way.

Here is some of my component code

   ngOnInit() {
    this.estudiantesService.getEstudiantes().subscribe(
      res => {
        this.estudiantes = res; //Data of the students for the table
      },
      err => console.error(err)
    );

     this.cargaDropdownSeccion(); //Loads data for dropdown, doesn't hang the app but is probably because at the time it only brings a single record
     this.cargaDropdownEspecialidades(); //Loads data for dropdown, this hangs the whole thing by itself, it usually brings seven records from the db
  }



   cargaDropdownSeccion() {
    this.seccionDrpdwn = [];
    this.seccionDrpdwn.push({ label: 'Secciones', value: null });

    this.seccionesService.getSecciones().subscribe(
      res => {
        this.secciones = res;
        for (let i = 0; i < this.secciones.length; i++) {
          this.seccionDrpdwn.push({ label: this.secciones[i].seccion, value:        this.secciones[i].idSeccion });
        }
      },
      err => console.error(err)
    );
  }

  cargaDropdownEspecialidades() {
    this.especialidadDrpdwn = [];
    this.especialidadDrpdwn.push({ label: 'Especialidad', value: null });
    console.log('aqui');
    this.especialidadesService.getEspecialidades().subscribe(
      res => {
        this.especialidades = res;
        console.log('sigo aqui');
        for (let i = 0; i < this.especialidades.length; i++) {
          this.especialidades.push({ label: this.especialidades[i].especialidad, value: this.especialidades[i].idEspecialidad });
        }
      },
      err => console.error(err)
    );
  }

Upvotes: 0

Views: 738

Answers (2)

ajaykumar mp
ajaykumar mp

Reputation: 546

As bojack said there will be infinite loop formed, so to aviod this change the below code 

this.especialidadesService.getEspecialidades().subscribe(
  res => {
    this.especialidades = res;
    console.log('sigo aqui');
    for (let i = 0; i < this.especialidades.length; i++) {
      this.especialidades.push({ label: this.especialidades[i].especialidad, value: this.especialidades[i].idEspecialidad });
    }
  },
  err => console.error(err)
);

TO

this.especialidadesService.getEspecialidades().subscribe(
  res => {
   this.especialidades = res;
   this.especialidades = this.especialidades.map((val)=>{
         return { label: val.especialidad, value: val.idEspecialidad }     
   })
  },
  err => console.error(err)
);

Upvotes: 1

Molda
Molda

Reputation: 5704

With each push to this.especialidades you increase this.especialidades.length which essentialy makes the loop infinite.

Try this instead:

this.especialidadesService.getEspecialidades().subscribe(
  res => {
    this.especialidades = [];
    for (let i = 0; i < res.length; i++) {
      this.especialidades.push({ label: res[i].especialidad, value: res[i].idEspecialidad });
    }
  },
  err => console.error(err)
);

Upvotes: 1

Related Questions