Does angular2 supports push function if we declare array object as empty?

Question

Guys i have declared a array object as shown in below code

 public data: Array<Object> = [] ;

But, the real problem i having is when i make a rest api call this empty array object gets some value. i had tried consolling it. But in console it shown

[] // empty array object

my rest api call and forEach loop code to create new object and it pushes into the already declared Array Object

public data: Array<Object>= [] ;

so, guys my rest api and forEach loop code goes here,

getChartDetails(examName): void {
this.resultService.getChartDetails(examName).subscribe(response => {
  this.p = response.percentage;
  this.myRes = response.sectionPercentage;
  this.len = response.sections.length;
  this.myRes.forEach(ele => {
    var obj = { value: 0, label: '', percentage: 0, color: "", highlight: "" };
    let dashboardColors = this._baConfig.get().colors.dashboard;
    obj.value = ele.correctedAnswerCount;
    obj.label = ele.sectionName;
    obj.percentage = ele.percentage;
    obj.color = dashboardColors.surfieGreen;
    obj.highlight = colorHelper.shade(dashboardColors.surfieGreen, 15);
    this.data.push(obj);
  });

}) }



 private _loadDoughnutCharts() {
     console.log(this.data);// here i consoled it
    let el = jQuery('.chart-area').get(0) as HTMLCanvasElement;
    console.log(el);
    new Chart(el.getContext('2d')).Doughnut(this.data, {
      segmentShowStroke: false,
      percentageInnerCutout: 64,
      responsive: true
    }); 
 }

 ngAfterViewInit() {
    this.getChartDetails(this.examName);
    if(this.showChart){
      this._loadDoughnutCharts(); 
    }
    if(this.showChart == true){
      this.deleteSession();
    }  
 }

Actual result on console is shown in below image empty array object

Expected result on console should be like this

[Object,Object,Object,Object,Object,Object,Object,Object,Object]

Guys help me to find a way for this problem.

And one more thing response from rest api getting properly

use `public data: Array = [] ;` instead `public data: Array = [] ;` — Pardeep Jain, Mar 15 '17 at 07:06
There is no single call to console.log() in the posted code. So how could we know why you get an empty array displayed in the console? — JB Nizet, Mar 15 '17 at 07:06
i had called that _loadDoughnutCharts() function within the ngAfterViewInit() — Gurudath G, Mar 15 '17 at 07:12
@GurudathG By the time JBNizet made that comment there wasn't any `console.log`. You edited it.. — eko, Mar 15 '17 at 07:15
@PardeepJain Dude, i had tried doing that stuff. But, it's still showing the same which i had shown already in above actual result image — Gurudath G, Mar 15 '17 at 07:15
You should think about what you're asking here. You're showing one function that populates an array. You're showing another, unrelated function displaying the array. But we have no idea at all of **when** and **how** the functions are called. The general answer is obvious: the displayed array is empty because the code that populates the array has not been called yet. Why it has not been called yet, we can't say with what you posted. — JB Nizet, Mar 15 '17 at 07:16
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — eko, Mar 15 '17 at 07:35

score 1 · Accepted Answer · answered Mar 15 '17 at 07:36

I can only do some guessing here.

Cause (guessing)

The console log showing empty this.data because _loadDoughnutCharts() is called before subscribe return with data.

Fix

To fix it, call _loadDoughnutCharts() within the callback.

getChartDetails(examName): void {
this.resultService.getChartDetails(examName).subscribe(response => {
  this.p = response.percentage;
  this.myRes = response.sectionPercentage;
  this.len = response.sections.length;
  this.myRes.forEach(ele => {
    var obj = { value: 0, label: '', percentage: 0, color: "", highlight: "" };
    let dashboardColors = this._baConfig.get().colors.dashboard;
    obj.value = ele.correctedAnswerCount;
    obj.label = ele.sectionName;
    obj.percentage = ele.percentage;
    obj.color = dashboardColors.surfieGreen;
    obj.highlight = colorHelper.shade(dashboardColors.surfieGreen, 15);
    this.data.push(obj);
  });

  // Call your chart here!!
  this._loadDoughnutCharts();
}) }

private _loadDoughnutCharts() {
 console.log(this.data);// here i consoled it
let el = jQuery('.chart-area').get(0) as HTMLCanvasElement;
console.log(el);
new Chart(el.getContext('2d')).Doughnut(this.data, {
  segmentShowStroke: false,
  percentageInnerCutout: 64,
  responsive: true
});

i have got 14 reputation... it's asking for atleast 15 to up vote — Gurudath G, Mar 17 '17 at 11:35
@GurudathG yeah, someone down vote you again, I really don't know why. — John Siu, Mar 17 '17 at 14:00

Does angular2 supports push function if we declare array object as empty?

1 Answers1

Cause (guessing)

Fix