CODEWITHSUNDEEP
angularngoninit
Zabs
Zabs

Reputation: 14142

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

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?

Upvotes: 0

Views: 1267

Answers (3)

Eduardo Vargas
Eduardo Vargas

Reputation: 9392

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
    }
}

Upvotes: 1

vince
vince

Reputation: 8306

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

Upvotes: 1

Léo R.
Léo R.

Reputation: 2698

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

Upvotes: 1

Related Questions