Angular 2/4 Typescript Array contents not updating

Question

I'm having a problem with updating the contents of an array in an Angular component.

The array with name arr is created to store the values that is used by the dataset for the ChartJS chart.

On ngOnInit, I run retrieveTempDataReturn() function which returns _arr, an array of retrieved values, from a data service, and I assign the _arr array into arr array I declared on top.

After the page has loaded, I run displayArray() function which displays the contents of the arr array, using click event on a button. The output in the browser console is as follows:

Array contents: 22.1,22.1,23.1,24.1,25.1,26.1,25.1,24.1,22.1,21.1 

Thus, I can see that the retrieved data is successfully updated into the arr array.

Then, I run another function using click event on a button, retrieveHumidDataAssign() which retrieves another set of data from the same data service and assigns the data into the arr array right away. Later in the function, I console.log() the contents of the arr array and I can see the values updated in the arr array. The output in the browser console is as follows:

Array assigned Humid: 56,56,56,56,56,56,56,56,56,56

But then when I the displayArray() again to view the content in the arr array, the content is still the original content. The output in the browser console is as follows:

Array contents: 22.1,22.1,23.1,24.1,25.1,26.1,25.1,24.1,22.1,21.1

The content of arr array seemed to be changed in the console.log part of retrieveHumidDataAssign(). But it is somehow not changed when I separately run another function to display its contents.

Why does this happen? And how do I update the content in the array? Please help me.

Below is the component file:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {BaseChartDirective} from 'ng2-charts/ng2-charts';

@Component({
  templateUrl: 'chartjs.component.html'
})
export class ChartJSComponent {

  arr = [];

  constructor(private dataService: DataService){
  }

  ngOnInit(){
    this.arr = this.retrieveTempDataReturn();
  }

//function that retrieves and returns array of temperature values
  retrieveTempDataReturn(){
    var _arr = new Array();
    this.dataService.getData().subscribe(function(response){
      console.log("Response: " + JSON.stringify(response));
      for(var item of response){
        console.log("Pushing " + item.Temperature);
        _arr.push(item.Temperature);
      }
      console.log("Array returned: " + _arr);
    });
    return _arr;
  }

//function that retrieves and assign array into the "arr" array
  retrieveHumidDataAssign(){
    var _arr = new Array();
    this.dataService.getData().subscribe(function(response){
      console.log("Response: " + JSON.stringify(response));
      for(var item of response){
        _arr.push(item.Humidity);
      }
      this.arr = _arr;
      console.log("Array assigned Humid: " + this.arr);
    });
  }

//display the data on the chart by using "arr" array in the dataset for the chart
  refreshChart(){
    console.log("To display: " + this.arr);
    this.datasets = [{
      label: "Values",
      data: this.arr 
    }];
  }

//function to display the contents of the array
  displayArray(){
    console.log("Array contents: " + this.arr);
  }

//arrays that are used by Chart JS chart for data visualization
  private datasets = [
    {
      label: "Values",
      data: []
    }
  ];

  private labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

}

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

Here you have to keep the context while using this in callbacks, else this will turn to callback function itself。

you can use arrow function here

//function that retrieves and assign array into the "arr" array
retrieveHumidDataAssign(){
  var _arr = new Array();
  this.dataService.getData().subscribe(response => {     // <----arrow function here
    ...
    this.arr = _arr;
    console.log("Array assigned Humid: " + this.arr);
  });
}