title: How do I return the response from an Observable/http/async call in angular?
body: <p>I have service which returns an observable which does an http request to my server and gets the data. I want to use this data but I always end up getting <code>undefined</code>. What's the problem?</p>
  
  <p><strong>Service</strong>:</p>
  
  <pre><code>@Injectable()
  export class EventService {
  
    constructor(private http: Http) { }
  
    getEventList(): Observable&lt;any&gt;{
      let headers = new Headers({ 'Content-Type': 'application/json' });
      let options = new RequestOptions({ headers: headers });
  
      return this.http.get("http://localhost:9999/events/get", options)
                  .map((res)=&gt; res.json())
                  .catch((err)=&gt; err)
    }
  }
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>@Component({...})
  export class EventComponent {
  
    myEvents: any;
  
    constructor( private es: EventService ) { }
  
    ngOnInit(){
      this.es.getEventList()
          .subscribe((response)=&gt;{
              this.myEvents = response;
          });
  
      console.log(this.myEvents); //This prints undefined!
    }
  }
  </code></pre>
  
  <p>I checked <a href="https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call">How do I return the response from an asynchronous call?</a> post but couldn't find a solution</p>