0

Estoy intentando crear un crud en Ionic que a la vez es usando Angular, entonces el problema surge cuando consumo la api por medio HttpClient y al rescatar los datos los almaceno en una variable pero cuando imprimo en console.log me aparece undefined

Mi código en el archivo api-res.service.ts

  getEmpresa(){
    return this.http.get(`${this.url}/empresa`);
  }

codigo dentro del archivo home.page.ts

async cargarRegistro(){
  this.loading = await this.loadingCtrl.create({message: "Cargando..."});
  this.loading.present();
  this.service.getEmpresa().subscribe(result =>{
    this.arrayEmpresa = result;
  });

  console.log(this.arrayEmpresa);


}

y lo cargo dentro del método ngOnInit

ngOnInit() {
  this.cargarMapa();
}

el problema surgue cuando quiero obtener los datos del arreglo arrayEmpresa, por lo cual me devuelve indefinido. Esta variable lo declaro hasta arriba como global o solo pongo arrayEmpresa y ya. Pero no se porque no me esta devolviendo los datos del result a la varable, alguna solucion?

0

1 respuesta 1

0

El subscribe es una operación asincrona y carga tu variable this.arrayEmpresas en otro momento despues del console.log

Tu código debe quedar así


async cargarRegistro(){
  this.loading = await this.loadingCtrl.create({message: "Cargando..."});
  this.loading.present();
  this.service.getEmpresa().subscribe(result =>{
    //Esto se ejecuta despues
    this.arrayEmpresa = result;
    //
     console.log(this.arrayEmpresa); //<=== Dentro del subscribe



  });

 //Esto se ejecuta primero
 //...mas codigo...

}

Las operaciones asíncronas fueron echas para que la aplicación no se congele durante la ejecución de las mismas. Angular esta diseñado para trabajar de esta manera así que cuando detecte un cambio en this.arraEmpresa lo mostrara de manera automática.

Otra forma de resolverlo es que pongas await antes de tu operacion como lo haces con this.loading


async cargarRegistro(){
  this.loading = await this.loadingCtrl.create({message: "Cargando..."});
  this.loading.present();
  this.arrayEmpresa = await this.service.getEmpresa()

  console.log(this.arrayEmpresa); //<=== Así si funciona




 //Esto se ejecuta despues
 //...mas código...

}
4
  • Tienes razón, el console, log dentro del susbcribe funciona, pero cuando quiero usar el this, arrayEmpresa para otra operación, como debería ser? como haria para que la otra linea de codigo pueda obtener los datos del arrayEmpresa si este esta a la espera de un cambio como lo menionaste de manera automatica el 30 nov. 2019 a las 18:14
  • Es automático. Angular se encarga de refrescar tu vista. Solo usala dónde la necesites o pon toda la lógica en el subscribe(Si no es demasiada)
    – Legna
    el 30 nov. 2019 a las 19:51
  • Me refiero a usarla dentro del archivo .ts no en la vista, ya que luego de obtener ese arrayEmpresa lo necesito pasar como parametro a los metodos de google google.maps.LatLng(....) pero me marca error porque los datos aun no se cargan al arrayEmpresa el 1 dic. 2019 a las 3:50
  • Esa lógica la tienes que poner en el subscribe. O usar la opción con await
    – Legna
    el 1 dic. 2019 a las 22:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.