0

estoy practicando y le he estado dando vueltas a esto.

En Angular intento consumir datos de http://api.openweathermap.org, tengo mis servicios que se conectan con los datos, estos los puedo ver por consola. Tengo los servicios cargados en un componente básico, hice una función que hará la llamada al servicio mencionado anteriormente, dentro de esta función hay una suscribe, el punto es que dentro del suscribe puedo ver los datos por consola, pero cuando intento guardar los datos fuera de esta función en una variable global que ya había creado no lo guarda, intenté colocarle un return dentro del suscribe pero tampoco me deja sacar el arreglo para procesarlo fuera del suscribe, cuando hago un console log de este ultimo array me devuelve undefined Estoy confundido, alguien puede orientarme? Dejo un pedazo del código: *** Ya todo esta importado y conectado con los servicios correspondientes.

export class UnoComponent implements OnInit {

  AllDataObj = {};
  AllData_Arr = {};

  constructor(private dataApi: DataAppService) { }

  ngOnInit():void {
   console.log(this.GetAllData());    
  }
  GetAllData(){    
   this.dataApi.getAllData().subscribe((data) => 
    {
        this.AllDataObj = (data);
        this.AllData_Arr= JSON.stringify(this.AllDataObj);
        return this.AllData_Arr;
      });

  }
1
  • Estas difiniendo mal el tipo de dato de tus variables cambia {} por [] ya que lo que recibes es un array Commented el 15 ago. 2019 a las 15:13

3 respuestas 3

1

Lo que veo es que estas definiendo tus variables para un tipo Object y no para un array modifica tu código de la siguiente forma:

 export class UnoComponent implements OnInit {

      AllDataObj: any;

      AllData_Arr = [];

      constructor(private dataApi: DataAppService) { }

      ngOnInit(){
        this.GetAllData();    
      }

      GetAllData() {    
       this.dataApi.getAllData().subscribe(
       result => {
            this.AllDataObj = result;
            this.AllData_Arr= JSON.stringify(this.AllDataObj);
            console.log(this.AllData_Arr)
       });
      }
3
  • Hola Francisco, gracias por responder. Tengo una pregunta adicional, tomando en consideración los comentarios de todos analicé la situación y replantié el ejemplo: private getPosts() { this.wp.getAll(5) .subscribe( data => { this.feed = data; this.allDataArr = JSON.stringify(this.feed); // console.log(this.allDataArr); <-- aqui puedo ver por consola. }); Cómo hago para los datos de allDataArr de la función getPost(), por consola puyedo verlos, sin embargo, los console.log fuera de esta función devuelven undefined y los retornos dentro de suscribe no work Commented el 16 ago. 2019 a las 13:51
  • Muestrame como tienes definido this.allDataArr ? Commented el 16 ago. 2019 a las 13:54
  • Hola Francisco, buscando en internet, encontré una alternativa similar a lo que estoy haciendo. Para resolverlo el profesional insertó dentro del result una función para que manejara la asignación del resultado de forma externa, en mi caso funcinó esto: result=> this.construyeURLJson(result) pero ahora me quedan más dudas respecto al funcionamiento de esta función, Acaso es una rutina encapsulada? solo es válida la data mientras se ejecuta esa línea? necesita de un elemento asincrono o una promesa? seguiré investigando y probando. Gracias por sus comentarios. Commented el 17 ago. 2019 a las 15:17
0

Es un error común al trabajar con observables. El procesamiento de los datos debe hacerse en la función callback del subscribe. Te explico un poco, la función subscribe() crea una subscripción al objeto que está emitiendo datos, pero como no se sabe en qué momento se emitirá un dato por eso se le pasa al subscribe() una función callback, esa función será llamada cada vez que se produzca un dato y se le pasará como parámetro, en este caso llamado data, el valor producido. Por eso dentro de esa función debe colocarse la lógica para procesar los datos recibidos. Y si inmediatamente luego de llamar a subscribe(); haces un console.log(variable); el resultado será undefined porque todavía no se han producido datos para guardar en esa variable.

    GetAllData(){    
   this.dataApi.getAllData().subscribe((data) => 
    {
        this.AllDataObj = (data);
        this.AllData_Arr= JSON.stringify(this.AllDataObj);

       //aquí se procesan los datos recibidos.

      });
     console.log(this.AllDataObj) // undefined porque todavía no se ha producido un valor

  }
0

Este error se debe al tipo de dato que devuelve tu funcion getAllData(), para solucionar esto ve a tu DataAppService en el metodo getAllData() añade o cambia el tipo de dato de retorno a ":any" de la siguiente manera:

 getAllData():any{

  //return http. etc,etc

}

Tu Respuesta

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

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