Angular: loop it's returning me an undefined value

Question

I'm trying to use Google Charts to draw a chat based on my array of objects.

I get the array, map the values to make a loop in the objects, and insert each value in the chart. But it's not working because the value that's returning for me it's undefined.

I don't know what to do. When I do that on ngOnInit() the values it returns for me normally, bus when I put this logic in some function, is not work =(

component.ts

   declare var google: any;

   @Component({selector, template...})

   export class AppComponent implements OnInit {

    tableContent!: ProgressTableDatas[];

    constructor(private dropdownService: DropdownService) { }

    ngOnInit(): void {
     this.tableContent = this.dropdownService.getProgressTableDatas();

     let datas = this.tableContent.map(data => data);

     for (let i = 0; i <= datas.length; i++) {
         console.log(datas[i].region, datas[i].budget, datas[i].closed);

         //Here the values it returns for me normally, like that
         // Region1 0.00 0.00
         // Region2 0.00 0.00...

     }

     google.charts.load('current', { packages: ['corechart'] });
     google.charts.setOnLoadCallback();
     google.charts.setOnLoadCallback(this.drawColumnChart);
   }

    // Here I get this error 'Cannot read properties of undefined (reading 'region').'

    drawColumnChart() {
     let datas = this.tableContent.map(data => data);

     for (let i = 1; i <= datas.length; i++) {
       var graphic = google.visualization.arrayToDataTable([
         ['Region', 'Budget', 'Closed'],
         [datas[i].region, datas[i].budget, datas[i].closed]
       ]);
     }

     var chart = new google.visualization.ColumnChart(document.getElementById('progressGraphic'));

     chart.draw(graphic);
    }

   }

dropdown.service

getProgressTableDatas() {
    return[
      {
        "region": "Region1",
        "budget": "0.00",
        "closed": "0.00"
      },
      {
        "region": "Region2",
        "budget": "0.00",
        "closed": "0.00"
      },      {
        "region": "Region3",
        "budget": "0.00",
        "closed": "0.00"
      },
      {
        "region": "Region4",
        "budget": "0.00",
        "closed": "0.00"
      },
      {
        "region": "Region5",
        "budget": "0.00",
        "closed": "0.00"
      },
      {
        "region": "Region6",
        "budget": "0.00",
        "closed": "0.00"
      },
    ]
  }

I doubt that you are using [tag:angularjs] since that project has been dead since January, 2022.... angularjs !== angular. — Claies, Dec 21 '22 at 18:36

WhiteHat · Answer 1 · 2022-12-21T19:21:23.840

arrays in javascript have a zero-based index,
meaning the first index in the array is 0.
and the last index is the length - 1.
if an array has 6 elements, the last index is 5.

here, you're starting at 1 and ending at 6.

 for (let i = 1; i <= datas.length; i++) {

in this case datas[6] is undefined...

you should be starting at 0 and ending at 5.

 for (let i = 0; i < datas.length; i++) {

*** also ***

you only need to call setOnLoadCallback once...

 google.charts.setOnLoadCallback();  // <-- remove this
 google.charts.setOnLoadCallback(this.drawColumnChart);

*** EDIT ***

from the comment, it sounds like you losing context or reference to this
Cannot read properties of undefined (reading 'tableContent')

as such, try drawing the chart inside ngOnInit, as follows.
note: the values for each series should be a number 0, not a string "0.00"

ngOnInit(): void {
  this.tableContent = this.dropdownService.getProgressTableDatas();

  let datas = this.tableContent.map(data => {
    return [data.region, parseFloat(data.budget), parseFloat(data.closed)];
  });

  google.charts.load('current', {
    packages: ['corechart']
  }).then(function () {
    var graphic = google.visualization.arrayToDataTable(datas);

    var chart = new google.visualization.ColumnChart(document.getElementById('progressGraphic'));

    chart.draw(graphic);
  });
}

thanks for the help, but not work =( Now I get this error: `loader.js:113 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'tableContent') TypeError: Cannot read properties of undefined (reading 'tableContent')` — Henrique Fernandez, Dec 21 '22 at 18:43
it didn't work but I made the chart with the data directly on it. And now I have another problem... The graphic is being shown normally but the subtitles when positioned at the top are overlapping. I already looked at your answers in other questions with this same theme here in the forum: https://stackoverflow.com/questions/45719154/how-to-fix-overlapping-google-chart-legend but I couldn't solve it... Could you try to help me with this problem? — Henrique Fernandez, Dec 22 '22 at 13:50

Angular: loop it's returning me an undefined value

1 Answers1