variable can't assign from subscribe method

Question

Within the method itself Shows the value, but outside it shows undefined message

Ubigeo.service.ts

 lisProvinciaByDepartamento( ubigeoId: string): Observable<Ubigeo[]> {
    let ubigeo$ = this.http
    .get(`${this.baseUrl}/provincia/${ubigeoId}`, {headers: this.getHeaders()})
    .map(mapUbigeos)
    .catch(handleError);
    return ubigeo$;
}

Detail.component.ts

cargaPronvicia(ubigeoId: string) {
    this._ubigeoService
        .lisProvinciaByDepartamento(ubigeoId)
        .subscribe((p) => {
            this.provinciaSeleccionada = p
                .find(item =>
                    item.ubigeoId.substr(2, 2) === ubigeoId.substr(2, 2));
            this.provincias = p;
            console.log(this.provinciaSeleccionada); //2
        });

    console.log(this.provinciaSeleccionada); //1
}

undefined in console

It's because your variable is an observable so there isn't a value inside of `this.provinciaSeleccionada` when you log it the first time — Gab, Mar 06 '17 at 22:20
You should avoid mixing promises and observables because that would defeat the purpose of observables. See @Aravind 's answer — Gab, Mar 06 '17 at 22:33

Aravind · Accepted Answer · 2017-03-06T22:42:16.977

Its because the data retrieval is relatively async when you are using it as observalbes. So never use the variable directly,

Good practices

Skip subscription if it is empty.

cargaPronvicia(ubigeoId: string) {
   this._ubigeoService
    .lisProvinciaByDepartamento(ubigeoId)
     ////////////////////////////////////////////////////////////////
    .skipWhile((p) => p === undefined)
     ////////////////////////////////////////////////////////////////
    .subscribe((p) => {
        this.provinciaSeleccionada = p
            .find(item =>
                item.ubigeoId.substr(2, 2) === ubigeoId.substr(2, 2));
        this.provincias = p;
        console.log(this.provinciaSeleccionada); //2
    });

console.log(this.provinciaSeleccionada); //1
}

Where ever you are using the subscribed variables, check if it contains data, an example in your case would be
```
if(this.provinciaSeleccionada){
    console.log(this.provinciaSeleccionada);
}
```

Update 1:

Use promises with most care, reason is when you are using promises in constructor, your component will not load until the promise is resolved.
- By this speed of the application will be as expected.
- Angular2's reactive nature is not utilized.

Isako Upvote too if this helped you. :) Happy coding – Aravind Mar 06 '17 at 22:45 — Aravind, Mar 06 '17 at 22:45

variable can't assign from subscribe method

1 Answers1