0

I Have a problem with the variable this in angularjs2 and ionic 2

I have this fuction:

getAnuncio(id_anuncio){
    console.log(id_anuncio)
    var token=this.local.get('token')._result; 
    var headers= new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Authorization', 'Token '+token);
    datos="id_anuncio="+id_anuncio;
    this.http.post('http://127.0.0.1:8000/envios/getAnuncioPorId/',datos , {
        headers: headers

    })

    .subscribe(success => {
        this.anuncio=success.json();
        console.log("BIENNN");
        console.log(success);
        console.log(this.anuncio);
        return this.anuncio;



    }

}

I call it from another function:

cargarMapa(){

    this.anuncio=this.getAnuncio(this.envio.anuncio);
    console.log(this.anuncio);
    //console.log(anuncio);
    //this.getOferta(this.envio.oferta);
    //console.log(this.oferta)
}

But when I try to log this.anuncio, it is undefined.

I need to store the data in a variable to use it from other function.

Anybody could help me?

Here is the code: https://github.com/p02diada/cyclaClientv2/blob/master/app/pages/sending-details/sending-details.js

Alberto Diaz
  • 113
  • 1
  • 1
  • 9

1 Answers1

0

You could leverage the do operator this way for this:

getAnuncio(id_anuncio){
  console.log(id_anuncio)
  var token=this.local.get('token')._result; 
  var headers= new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  headers.append('Authorization', 'Token '+token);
  datos="id_anuncio="+id_anuncio;
  this.http.post('http://127.0.0.1:8000/envios/getAnuncioPorId/',datos , {
    headers: headers

  })
  .map(res => success.json())
  .do(data => {
    this.anuncio = data;
  });
}

This way you can subscribe on the observable outside the getAnuncio method:

this.anuncio=this.getAnuncio(this.envio.anuncio).subscribe(
  (anuncio) => {
    // do something
    console.log(anuncio);
  }
);

Don't forget that things are asynchronous.

If you want to implement a kind of cache, use the following:

getAnuncio(id_anuncio){
  if (this.anuncio) {
    return Observable.of(this.anuncio);
  } else {
    var token=this.local.get('token')._result; 
    var headers= new Headers();
    (...)
  }
}

By using the this.anuncio directly is that you can't be sure that the data are there...

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • thank you for your answer but it does not work. ORIGINAL EXCEPTION: TypeError: this.http.post(...).do is not a function – Alberto Diaz May 17 '16 at 17:02
  • You're welcome! You need to include the `do` operator. See this question: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276. Replace `map` by `do` in it... – Thierry Templier May 17 '16 at 17:03
  • I have included the `do` operator now. It does not give me an error, But I can't use `this.anuncio` outside the function `getAnuncio` yet. I have tried it with a `setTimeout` because of the asynchrony and it does not work. – Alberto Diaz May 17 '16 at 17:18
  • when I try `this.anuncio=this.getAnuncio(this.envio.anuncio).subscribe( (anuncio) => { // do something console.log(anuncio); } );` It give me an error: **ORIGINAL EXCEPTION: TypeError: Cannot read property 'subscribe' of undefined** – Alberto Diaz May 18 '16 at 11:13
  • In fact `subscribe` returns a subscription not the result. You should this way: `this.getAnuncio(this.envio.anuncio).subscribe( (anuncio) => { this.anuncio = anuncio; } ); `. – Thierry Templier May 18 '16 at 11:15
  • Regarding your error, I think that you forgot to return the observable related to the HTTP request: `return this.http.post(...`. – Thierry Templier May 18 '16 at 11:16