Angular returning undefined in a function outside constructor

Question

I'm trying to create a trigger using angular, but when I get the response from my api it returns me undefined.

Here's my global-search.ts file:

export class GlobalSearchComponent{
    searchable: String = '';
    professionals: any = {}; 

    constructor(public client: Http){
    }

    getProfessionals() {
        return this.client.get('professionals')
                   .subscribe(data => this.professionals = data.json());
    }
    doSearch(ev: any) {
        let val = ev.target.value;
        if(val.length > 3) {
            this.getProfessionals();
            console.log(this.professionals);
        }
    }

if in getProfessionals() method I do:

return this.client.get('professionals'
              .subscribe(data => console.log(data.json()));

It returns me an object(and it's right), but in doSearch() method, it shows me undefined.

What am I doing wrong?

Possible duplicate of How do I return the response from an Observable/http/async call in angular2? — eko
– eko, Commented Aug 2, 2017 at 5:44
Ah, after your edit which changes this.getProviders to this.getProfessionals this makes sense — Frank Modica
– Frank Modica, Commented Aug 2, 2017 at 11:14

Stephen R. Smith · Accepted Answer · 2017-08-02 06:43:17Z

The problem you're having is because of where your console.log statement is.

Observable/ .subscribe is asynchronous, so it will allow the rest of your code to continue executing while it waits for the data to come back from your service, and then will update the this.professionals variable when that completes.

In your original code, you call the getProfessionals function from doSearch, and while the .subscribe is still being fulfilled (and the this.professionals variable is still undefined), the code continues and logs out that value (undefined), and then the data comes back and the variable is set to the correct value, but by this point the console has already logged out the previous state.

If you move the console.log statement into the .subscribe block after the response is received, you'll find it logs out the actual value you're expecting, as the console.log won't execute until the response is received and the value assigned to your variable.

export class GlobalSearchComponent{
    searchable: String = '';
    professionals: any = {}; 

    constructor(public client: Http){
    }

    getProfessionals() {
        return this.client.get('professionals')
              .subscribe(data => 
                    {
                      this.professionals = data.json();
                      console.log(this.professionals);
                    })
    }
    doSearch(ev: any) {
        let val = ev.target.value;
        if(val.length > 3) {
            this.getProfessionals();
        }
    }

Collectives™ on Stack Overflow

Angular returning undefined in a function outside constructor

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related