cannot access my json response data outside the ngOnInit() in my Angular 4.x app

Question

I have an Angular 4.x app with a http request that is getting sent and I am getting back valid json from the endpoint (I can see this in the initial console.log) - the problem is I cannot see this data outside on the ngOnInit() just below where I have the console.log

Can anyone suggest what the issue is?

export class SidebarComponent implements OnInit {

  constructor(private http: HttpClient, private userService: UserService) { }

   ngOnInit() {

    this.http.get('https://dev.myapp.com/api/angularfour/auth',
        { params: new HttpParams()
            .set('token', this.userService.getAuth().__token)
            .set('apiversion', '1')
            .set('appid', this.userService.getAuth().appid) })
        .subscribe(data => {
            console.log('data', data); // can see this data
        });
    }

console.log('menu data outside init', data); // cannot see this data?

score 1 · Answer 1 · answered Jan 25 '18 at 15:17

Be careful about the scope of the variables, in your exemple; data exist only in the subscribe method, you need to define a global variable in your class for example :

Under export class add :

mydata : any;

and in your subscribe method :

this.mydata = data;

So you can access data outside method :

console.log('menu data outside init', this.mydata);

score 1 · Answer 2 · answered Jan 25 '18 at 15:17

You will need to set a property on your component if you want to access it outside of the ngOnInit block. Right now, your data variable is scoped to the subscribe block in your ngOnInit method.

Try something like this:

export class SidebarComponent implements OnInit {

constructor(private http: HttpClient, private userService: UserService) { }

data: any; // property for data

ngOnInit() {

this.http.get('https://dev.myapp.com/api/angularfour/auth',
    { params: new HttpParams()
        .set('token', this.userService.getAuth().__token)
        .set('apiversion', '1')
        .set('appid', this.userService.getAuth().appid) })
    .subscribe(data => {
        this.data = data; // save the most recent data in the data property
        console.log('data', data); // can see this data
    });
}

console.log('menu data outside init', this.data); // your data

score 1 · Answer 3 · answered Jan 25 '18 at 15:18

export class SidebarComponent implements OnInit {
   myData:any;

  constructor(private http: HttpClient, private userService: UserService) { }

   ngOnInit() {

    this.http.get('https://dev.myapp.com/api/angularfour/auth',
        { params: new HttpParams()
            .set('token', this.userService.getAuth().__token)
            .set('apiversion', '1')
            .set('appid', this.userService.getAuth().appid) })
        .subscribe(data => {
            console.log('data', data); // can see this data
            this.myData=data;
        });
    }

   buttonClick(){
     console.log('menu data outside init',  this.myData); 
     // this will only work after the async call has finished
    }
}

cannot access my json response data outside the ngOnInit() in my Angular 4.x app

3 Answers3