Empty response in Angular 4 from java backend

Question

I'm new to Angular and I have a problem. I want to get data to my graph from my spring boot backend. I send a GET request from my Angular App and I receive empty response despite seeing in the console that it is not empty. Could you help me?

My angular service

getChartData(): Observable<Array<ChartDataParameters>> {
  return this.http.get<Array<ChartDataParameters>> ('http://127.0.0.1:8080/currency/chartData');
}

and my component which uses this method

this.databaseService.getChartData().subscribe(d => {
  this.data_origin = d;
});

for (let i = 0; i < this.data_origin.length; i++) {
  this.data.push([this.data_origin[i].date, this.data_origin[i].prediction, this.data_origin[i].currency]);
}

Answer 1

You should be using your data inside your Subscription. Also, you don't really need to create so many variables for the data that you're trying to use.

this.databaseService.getChartData().subscribe(d => {
  this.data_origin = d;
});

for (let i = 0; i < this.data_origin.length; i++) {
  this.data.push([this.data_origin[i].date, this.data_origin[i].prediction, this.data_origin[i].currency]);
}

should be

this.databaseService.getChartData().subscribe(d => {

  for (let i = 0; i < d.length; i++) {
    this.data.push([d[i].date, d[i].prediction, d[i].currency]);
  }

});

Also, I think there's something wrong with what you're doing here. Is data supposed to be an array of objects with each object containing three keys, date, prediction and currency?

If that's the case, I think you can reduce the logic to just this:

this.databaseService.getChartData().subscribe(d => {

  this.data = d.map(datum => { date: datum.date, prediction: datum.prediction, currency: datum.currency })

});

Answer 2

move loop inside subscribe

this.databaseService.getChartData().subscribe(d => {
  for (let i = 0; i < d.length; i++) {
    this.data.push([d[i].date, d[i].prediction, d[i].currency]);
  }
});