Rxjs: component variables inside a RxJS subscribe() function are undefined

[vijender1256]

Variables inside subscribe are undefined but when i put breakpoint before hitting service subscribe I have the variable defined.

In Service:

    getCashierRiskProfiles(): Observable<ICashierRiskProfile[]> {
        return this.http.get(this._baseUrl + "src/HTTPJson/cashierriskprofile.json")
            .map((res: Response) => res.json())
            .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
    }

In Component:

    import { Component, OnInit} from "@angular/core";
    import { CashierRiskProfileService}   from "./cashierriskprofile.service";
    import { ICashierRiskProfile} from "../shared/interfaces";
    import { Observable } from 'rxjs/Observable';

      @Component({
                selector: "cashierriskprofile",
                templateUrl: "../src/app/cashierriskprofile/cashierriskprofile.component.html"
                })

        export class CashierRiskProfileComponent implements OnInit {
                filterText : string;
                cashierRiskProfiles: ICashierRiskProfile[];

             constructor(private sorter: Sorter,
                    private service: CashierRiskProfileService) {

                }

             ngOnInit() {
                    this.filterText = "Filter Exceptions:";
                    //// Observable technique
                    this.service.getCashierRiskProfiles()
                        .subscribe((riskProfiles) => {
                       this.cashierRiskProfiles = riskProfiles;
                       this.filterText = "Inside Subscribe:";

                        }, 
                        err => {
                            // Log errors if any
                            console.log(err);
                        });
                }

In above component code inside ngonInit() service call, this.cashierRiskProfiles inside the subscribe is undefined, but after I put breakpoint before the service callI have that variable available and defined. I have seen lot of people having this issue with component variables with this.variablename gettting undefined inside subscribe. When you notice this.filterText I can get the values assigned to it outside dataservice call, but when I put breakpoint inside subscribe, this.filterText is underfined dont know how I am losing variable inside subscribe. Can anyone tell what's going on ?

[benlesh]

I'm having a hard time discerning what you're asking.

If you put a breakpoint on the line this.cashierRiskProfiles = riskProfiles;, then this.cashierRiskProfiles will, of course, be undefined, because nothing has set it yet. riskProfiles should be whatever your service responded with. However, _after_ that line, this.cashierRiskProfiles === riskProfiles should be true, because you've set it. Other than that, I don't see any errors in your Rx code, and there is no behavior in RxJS that would cause arrow functions to treat this differently.

If that doesn't answer your question, I'd recommend posting the question on StackOverflow and tagging it with angular2 or ng2.

As this doesn't seem to be a RxJS related issue or bug, I'm going to close it for now, but feel free to continue to comment if you have more questions.

[vijender1256]

@blesh thank you, below code will explain it better:

 this.service.getCashierRiskProfiles().subscribe((riskProfiles) => {
            this.cashierRiskProfiles = riskProfiles;
            console.log(this.cashierRiskProfiles);
        });

If i put break point at console.log, by that time this.cashierRiskProfiles should have values assigned to it, when I hover on it, it still is undefined, but console.log is printing object in console developer tools. The object is getting returned from service, but on hover to see value for this.cashierRiskProfiles it is showing as undefined.

Why is that when I put breakpoint and hover over the object I couldn't see the data but I can print it in console. I can hover riskProfiles to see the object, but same should be with this.cashierRiskProfiles, after assigning I couldn't hover and see this.cashierRiskProfiles, I see it as undefined.

Thanks for responding :)

[david-driscoll]

@vijender1256 are you sure that the this is undefined?

It may be that this is undefined in the chrome debugger, but that is related to TypeScript / Sourcemaps.

When TypeScript compiles

(riskProfiles) => {
    this.cashierRiskProfiles = riskProfiles;
    console.log(this.cashierRiskProfiles);
}

It basically desugars down to...

var _this = this;
this.service.getCashierRiskProfiles().subscribe(function (riskProfiles) {
    _this.cashierRiskProfiles = riskProfiles;
    console.log(_this.cashierRiskProfiles);
});

In this scenario the debugger looks at this and sees undefined, when in fact the this you are looking for is _this.

[david-driscoll]

Another note, this is how the fat arrow function is supposed to work, the desugaring is for JavaScript support in browsers that do not yet support =>.

MDN has a great article on the behaviors of arrow functions. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

[RajashekharGampa]

Hi David and Vijender, I am facing the same undefined issue after assigning the value in subscribe. What is the solution for this. Thanks in advance.

[MFProduction]

Hi, are there any news about this issue?

[trxcllnt]

@MFProduction this is a chrome debugger issue, nothing to do with Rx

[MFProduction]

thank you

[cesarvarela]

@trxcllnt Do you know where can I find information about the status of the issue?

[kkopiec]

I am not too sure if the issue is the same but here is my solution:
service.getsth().subscribe(x => onSubscription(this.variableToAccess, x));

kind regards
K.

[finalxcode]

look this, https://github.com/angular/angular-cli/issues/8421

[kboucher]

@david-driscoll Bravo, sir! I never suspected for a second that this might be an issue with Chrome debugger.

Whoever down-voted your post should be severely reprimanded.

For anyone else who know how this works and still can't get pass this issue, please refer to @david-driscoll 's comments above.

[sebaquevedo]

i implemented the @kkopiec type of solution, i stablished my subscribe function on a service class, and on another component got the need to use properties of the component , set them inside of the function that class the service i mentioned.

i first tried using a named function to receive data from a callback in the service.

i ended using the arrow way on the component...

this._autenticacionService.signup(this.usuario, (response) => {
        if(response.status === 'success' && response.data !== '' && response.code === '001'){
                let usuario =  response.data;
                this.response.code = response.code;
                this.response.message = response.message;
...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.