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?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — eko, Aug 02 '17 at 05:44
Ah, after your edit which changes `this.getProviders` to `this.getProfessionals` this makes sense — Frank Modica, Aug 02 '17 at 11:14

score 1 · Accepted Answer · answered Aug 02 '17 at 06:43

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();
        }
    }

Angular returning undefined in a function outside constructor

1 Answers1