how to first complete evaulate api call using Http get method in angular 2?

Question

I have call api from http.get method and need to return response but problem is that next step evaluate first. like in my service.ts file

 public mydata:any;

   constructor(private http:Http)
   getSettings()
  {
         this.http.get("http://localhost:60599/api/export/settings?api_key=1234567928682345")
                    .map(res=>res.json())
                    .subscribe((res) =>
                    {  
                        mydata=res;
                        //second
                        console.log((mydata);
                    });
          //first
      console.log(this.mydata);
  }

but its in #first that evaluate null or undefined value and I need to return it and get that value in my component. in #second comments when I print mydata it prints but after not what is the reason behind this login and how first evaluate and return value.

I think you should return my data from your subscribe method like return value as return mydata; — Lalji Dhameliya, Dec 05 '16 at 13:31

score 0 · Answer 1 · answered Dec 05 '16 at 13:47

public mydata:any;
constructor(private http:Http)
getSettings(){
     return this.http.get("http://localhost:60599/api/export/settings?api_key=1234567928682345")
    .map(res=>res.json());
  console.log(this.mydata);
}

in your function

getSettings().subscribe((res) =>
{  
    mydata=res;
    console.log((mydata);
});

score 0 · Answer 2 · edited May 23 '17 at 12:17

Solution:

You have to return return http.get( ... ).map( ... ) and move your subscribe method to method which calls getSettings()

If you want, you can use resolver to get data before controller will be initialized Using Resolve In Angular2 Routes

Explanation:

http.get() method is returning Observable, which (like Promises) is wrapper for asynchronous call.

So it means that execution order looks like:

http.get() is sending request to server, and watching for response (which has not yet come)
//first is executed
when response comes, from http.get() event is executed, after which callbacks from all next methods (map and subscribe methods) are executed
//second is in subcribe callback, so its executed too

score 0 · Answer 3 · answered Dec 05 '16 at 14:05

This is the classical problem for people, which have not enough experience with asynchronous requests. Your http-call is not blocking your code, so the browser will step down to console.log(this.mydata); before your http-call is even finished.

If you want execute any commands after that call is finished, then you need to put it into the suscribe method:

this.http.get("http://localhost:60599/api/export/settings?api_key=1234567928682345")
                    .map(res=>res.json())
                    .subscribe((res) =>
                    {  
                        // evaluate the response here ... This snippet of  code will only get executed, if the request is finished
                    }

but when this method call from my component how to return this value because and get into variable — tthewolf3D, Dec 06 '16 at 07:03
Then you don't call the subscribe() mehtod here in the service. Instead you call this service method from your component and then your subscribing on it. Then you have the result in your component and you can use it there. — Emre Öztürk, Dec 07 '16 at 23:08

how to first complete evaulate api call using Http get method in angular 2?

3 Answers3