Reputation:
I've build an application with Angular 5 and Java Spring Boot.
I currently have the problem that I can't take the received data out of my data service in Angular.
This is my data service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getClasses(): Observable<any> {
return this.http.get('//localhost:8080/classes');
}
}
This is the component where I want to put the data:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-classes',
templateUrl: './classes.component.html',
styleUrls: ['./classes.component.css']
})
export class ClassesComponent implements OnInit {
classes: Array<any>;
constructor(private dataService: DataService) { }
ngOnInit() {
this.getClasses();
}
getClasses(): void {
this.dataService.getClasses().subscribe(data => {this.classes = data});
}
}
This is what I get from console.log(data):
(3) [{…}, {…}, {…}]
0: {version: null, id: 1, name: "3AHIT"}
1: {version: null, id: 2, name: "4AHIT"}
2: {version: null, id: 3, name: "5AHIT"}
length: 3
__proto__: Array(0)
And this from console.log(this.classes):
undefined
I used this tutorial for my application: https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot
I haven't found anything that helped me and I hope that somebody can help me here.
Thanks in advance.
Upvotes: 0
Views: 61
Reputation: 1756
Your getClasses()
method is an async
function, so if you try to console.log(this.classes)
in your ngOnInit
, right after calling this.getClasses()
it will return undefined
because your console.log
gets fired before your call to backend gets resolved.
So if you want to check that the value of you classes
variable has been updated you should do that in the subscribe
of your method. Somehting like this:
getClasses(): void {
this.dataService.getClasses().subscribe(data => {
this.classes = data;
console.log(this.classes);
});
}
This way you make sure you log your variable once the call to your backend has been resolved.
Upvotes: 1
Reputation: 654
The data are retreived inside your subscription. IE:
this.dataService.getClasses().subscribe(data => {
this.classes = data;
console.log(this.classes); // <--- this will log your data
//call a function with this.classes for exemple here
});
If you are using this.classes
outside the result of the subscription it will be undefined since the request has not completed
Upvotes: 1