Q:

Angular-Highcharts: Cannot read property of 'Apartment' of undefined of an object

I am using Highcharts with Angular and I have two objects.
Object one have mock data and object two have data pull from the cloud via xmlHttpRequest. When I use object one in Highcharts I get the intended result but with object two I get

ERROR TypeError: Cannot read property 'Condo' of undefined
ERROR TypeError: Cannot read property 'Apartment' of undefined

According to the console.log, two objects look and should be identical.
Object One:
var secondChartData = {
   Condo: [120],
   Apartment: [302],
}
//console log: secondChartData {Condo: Array(1), Apartment: Array(1)}

Object Two:
buildingTypeObj = {};
buildingType: any[] = [];
buildingSize: any[] = [];
constructor() {
  // other codes
  this.buildingType.push(...from Firebase...);
  this.buildingSize.push(...from Firebase...);
  for(var j = 0; j < this.buildingType.length; j++) {
    this.buildingTypeObj[this.buildingType[j]] = [this.buildingSize[j]];
  }
  //console log: secondChartData {Condo: Array(1), Apartment: Array(1)}
}

Highcharts:
ngAfterViewInit): void {
  // other codes
  function renderSecond(e) {
    var point = this;
    series: [{
      data: this.buildingTypeObj[point.name], // doesn't work
      //data: secondChartData[point.name], // works
    }]
  }
}

REST API via async because that was the system was setup:
static async getInfo() {
  // other codes
  const xmlHttp = new XMLHttpREquest();
  xmlHttp.open("GET", groupsEndpoint, false); // false for async
  // other codes
}

I do not understand why object two returns an error.
Can the error be caused by async?
Here is my Fiddle to show the intended behaviors

A:

Since you used an ES5 function syntax, the context of this is changed.
You can no longer access buildingTypeObj inside your component with this.
Instead, have above your function a reference of this.
ngAfterViewInit() {
  // other codes
  const self = this;
  function renderSecond(e) {
    series: [{
      data: self.buildingTypeObj[this.name],
      data: secondChartData[this.name], 
    }]
  }
}

