lulz

private getGroups(): Observable<any> {
  // ....
  return this.http.get(_url, options)
    .map(response => {
      var responseAsObject = response.json();
      console.log(responseAsObject);
      return responseAsObject;
    })'
}

Show me your current getGroups implementation.

private getGroups() : Observable {
console.log("In Groups");
let _url = "http://url.....";
let headers = new Headers();
headers.append('X-User', sessionStorage.getItem('username'));
headers.append('X-Token', sessionStorage.getItem('token'));
headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({ headers: headers });

return this.http.get(_url, options)
.map(response => {
  var responseAsObject = response.json();
  this.roles = responseAsObject;
})

}

so how do you expect this work?

My code: https://gist.github.com/sharikovvladislav/041da37b87c1f74976799c548065fcf2#file-lulz-L7. Note return statement.

Your code:

return this.http.get(_url, options)
.map(response => {
  var responseAsObject = response.json();
  this.roles = responseAsObject;
})

You return undefined. Thats why you get undefined in the usage.

Did that solved your problem?

Sort of, even if I return the variable I can't map it to my array. But you helped clarify part of the problem so I have that to thank you :)