Receiving data from an observable

Question

I’m having a problem using an Observable. While inside the Ngoinit method, when fetching the data, I get the array correctly and Seto in the class variable. However, when trying to access data outside of the subscribe, I get Undefined as a response. Can anyone tell why this occurs?

@Component({
      moduleId: module.id,
      selector: 'operacao',
      templateUrl: './operacao.component.html',
      providers: [Operacao],
      styleUrls: ['./operacao.component.css']
    })
    export class OperacaoComponent implements OnInit {

      private _operacao: Operacao;
      private _operacoes: any[];


    public rows: Array<any> = [];
    private myserviceService: MyserviceService;
...


 constructor(myservice: MyserviceService) {
    this.length = 10;
    this.myserviceService = myservice;

  }
    ...

ngOnInit() {
 this.myserviceService.getOperacoes()
  .subscribe((operacao) => {
    this._operacoes = operacao; 
    //here i get the "right" value
     console.log(this._operacoes); 
    //Array(2) [Object, Object]
    //0:Object {id: 0, acao_id: 0, user_id: "1", …}
    //1:Object {id: 1, acao_id: 1, user_id: "1", …} 

myservice.ts

getOperacoes() {
      return this.http.get(this.url + 'operacoes').map(res => res.json());
}

when I try to access the data outside the observable, I receive Undefined.

console.log(this._operacoes);

Answer 1

The problem is that you are using the reserved word this to access the operations variable within the subscribe. This happens, because in javascript, the scope of this changes when you enter the function that you created for the subscribe.

To solve this problem, we need to attach this from the scope of your main class to a variable and pass it within subscribe. For this, just change your ngOnInit for:

ngOnInit() {
 let self = this;
 this.myserviceService.getOperacoes()
  .subscribe((operacao) => {
    self._operacoes = operacao; 
     console.log(self._operacoes);
  });
}

If you have only one line (an assignment, for example), you would not need to create a new block (consequently, you would not create a new scope), so you can use the keyword this, as follows:

ngOnInit() {
 this.myserviceService.getOperacoes()
  .subscribe((operacao) => this._operacoes = operacao);
}

A third possibility is to attach a function the class itself to process the received data, as follows:

ngOnInit() {
 this.myserviceService.getOperacoes()
  .subscribe((operacao) => this.trataResposta(operacao));
}

trataResposta(resposta: any[]) {
  this._operacao = resposta;
  //Qualquer tratamento necessário
}