Angular 2/4 Typescript Array content not updating

I am having a problem updating the content of an array in an Angular component.

A named array arr

is created to store the values ​​that are used in the dataset for the chart ChartJS

.

In ngOnInit

I am running a function retrieveTempDataReturn()

that returns _arr

, an array of values returned from a data service, and I assign the array _arr

to an array arr

that I declared on top.

After the page loads, I run a function displayArray()

that displays the contents of the array arr

using the click event on the button. The result in the browser console looks like this:

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

      

        
        
        
      

    

This way I can see that the received data is successfully updated in the array arr

.

Then I fire another function using the click event on the button retrieveHumidDataAssign()

, which fetches another set of data from one data service and immediately assigns the data to an array arr

. Later in the function, I console.log () the contents of the array arr

and I can see the values ​​updated in the array arr

. The result in the browser console looks like this:

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

      

        
        
        
      

    

But then when I displayArray()

view the content in the array again arr

, the content is still the original content. The result in the browser console looks like this:

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 the array arr

seemed to have changed in part console.log

retrieveHumidDataAssign()

. But that somehow didn't change when I separately run another function to display its content.

Why is this happening? 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
        }
      }]
    }
  };

}