How to initialize an array of objects from response data in angular?

Question

I have a server side script that collects sensor data into a database with multi-threading. On the front-end I have a very simple angular page, where I would like to display these data in graphs. The plan is that I get the active modules that are measuring sensor information on the server side. An example response for that looks like this:

[
{
    "id": 1,
    "name": "CPU Usage",
    "frequency": 5,
    "unit": "%"
},
{
    "id": 2,
    "name": "Memory Usage",
    "frequency": 4,
    "unit": "GB"
}
]

Then I would like to create two graphs that I can update over the time. This is the code I'm trying to use to set up the graphs:

export class DashboardComponent implements OnInit {
  public charts: [];
  constructor(private httpClient: HttpClient, private dataService: ApiService) { }

  ngOnInit(): void {
    this.httpClient.get<any>(this.dataService.baseUrl + '/measurable/active').subscribe({
      next: data => {
        console.debug(data);
        data.forEach(function (item, charts) {
          // let charts = [];
          document.getElementById('charts').innerHTML
            += '<label>' + item.name + '(' + item.unit + ')' + '</label>'
            + '<canvas id="chart' + item.id + '" style="width:100%; height:200px" width="1262" height="200"></canvas>';

          let newCharts = new SmoothieChart();
          newCharts.streamTo(document.getElementById('chart' + item.id));

          charts.push(newCharts);
        });
      },
      error: error => {
        console.error('Could not load any measurable', error.message);
      }
    })
    console.debug(this.charts);
  }
}

Unfortunately I'm not very familiar with front-end technologies, so I don't really know how should I do it correctly to make it work. Can someone help me with it, please?

saivishnu tammineni · Accepted Answer · 2020-12-05 07:07:55Z

Are you expecting the console.log(this.charts) to log the charts? This won't work because the http request is a asynchronous call. so the request is initiated and browser moves to execute next statement
That means after initiating the backend request the browser moves to console.log(this.charts) statement. the code inside subscribe runs after http request is complete
Use can see this in action by adding break points
Now add the console.log(this.charts) after forEach loop ends inside subscription.
Using innerHtml, queryselecting is not a recommended thing in angular. You can do the same thing in a easier way using angular interpolation {{}}. For this save the data from service to a public property in class and use it in html.
It is not a recommended way to call a http service from a component. Move the call to backend api to a service and call the service from the component

Collectives™ on Stack Overflow

How to initialize an array of objects from response data in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related