Angular2 Observable issue, Cannot read property 'subscribe' of undefined

Question

I have problem with Observables in Angular2, which always results in a "Cannot read property 'subscribe' of undefined" the first time the code is called.

I have a service called FieldService, which a getFields method:

getFields(): Observable<any>{

    console.log("FieldService getFields");

    let fields = JSON.parse(localStorage.getItem('organisationFields') || 'null');

    if(!fields) {
       this._backendService.get(this.fieldsUrl).subscribe(response=> {
       let fields = response.data;

       console.log("FieldService no local fields");

       localStorage.setItem('organisationFields', JSON.stringify(fields));

       return Observable.of(fields).map(o => o);
    }, error => { 
        console.error('FieldsService An error occurred', error);
            return Observable.throw(error);
        }); 
    } else {
       console.log("FieldService local fields") 
        return Observable.of(fields).map(o => o);
    }
}

It checks to see if there are any "fields" in the local storage and return these as an Observable, if there are none (first time login) we go a fetch these from the backend and stores these on the localStorage.

This service is the used in my ListComponent.ts in ngOnInit:

this.fieldService.getFields().subscribe( (response) => {
    let fields = response;  
    this.fieldObjects = {};
    for(let fieldIndex of fields){
        this.fieldObjects[fieldIndex.id] = fieldIndex;
    }
   this.getDeviations(this.page, this.config.stage.id, this.config.createdBy);
}, error => { 
    console.error('An error occurred', error);
});

I need to have the getFields() method called before I can call the getDeviations(), but I get this error:

ERROR TypeError: Cannot read property 'subscribe' of undefined
    at ListComponent.webpackJsonp.../../../../../src/app/deviation/list.component.ts.ListComponent.ngOnInit (list.component.ts:38)

If the "fields" exists in the localStorage - the code works everytime, but if I clear the localStorage and need to go and get them for the first time I get the error. What is wrong?

You cannot return values from the next and error handlers passed to subscribe. That's just not how it works. — cartant
– cartant, Commented Aug 5, 2017 at 9:45
Also, consistent indentation would go some way towards making this legible. — cartant
– cartant, Commented Aug 5, 2017 at 9:46
I dont understand what you mean regarding the return values next and error. Where is my error? Fixed the indentation — ChrisWorks
– ChrisWorks, Commented Aug 5, 2017 at 10:31

Andrei Matracaru · Accepted Answer · 2017-08-05 13:21:36Z

1

Try this

getFields(): Observable<any>{

    console.log("FieldService getFields");

    let fields = JSON.parse(localStorage.getItem('organisationFields') || 'null');

    if(!fields) {
        return this._backendService.get(this.fieldsUrl)
                                    .map(response=> {
                                                let fields = response.data;
                                                console.log("FieldService no local fields");
                                                localStorage.setItem('organisationFields', JSON.stringify(fields));
                                                return fields;
                                            }); 
    } else {
       console.log("FieldService local fields") 
        return Observable.of(fields).map(o => o);
    }
}

On the if, you were not actually returning anything, that's why you were getting undefined.

answered Aug 5, 2017 at 13:21

Andrei Matracaru

3,6811 gold badge27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChrisWorks Over a year ago

Thanks Andrei, that was exactly it. I forgot the return in front of the this._backendService and I also changed the subscribe to a map

Andrei Matracaru Over a year ago

You're welcome. Please accept my answer if that helped.

Mohammad nabil · Accepted Answer · 2017-11-01 07:26:36Z

0

Try this

Just import this component, may solve your problem.

import 'rxjs/add/observable/of';

answered Nov 1, 2017 at 7:26

Mohammad nabil

1,0202 gold badges12 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular2 Observable issue, Cannot read property 'subscribe' of undefined

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related