Angular 5 data request

Question

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.

Answer 1

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.

Answer 2

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