Angular 2 Cannot Read Property of Undefined (Function Name)

Question

Component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-ore-table',
  templateUrl: './ore-table.component.html',
  styleUrls: ['./ore-table.component.less']
})
export class OreTableComponent implements OnInit {
  ores = '../assets/json/ores.json';
  prices = 'https://esi.tech.ccp.is/latest/markets/prices/?datasource=tranquility';

  oreArray: any;
  pricesArray: any;
  joinedArray: any;

  constructor(private http: HttpClient) { }

  getOres() {
    this.http.get(this.ores).subscribe(data => {
      this.oreArray = data;
      this.getPrices();
    });
  }

  getPrices() {
    this.http.get(this.prices).subscribe(data => {
      this.pricesArray = data;
      this.joinPrices();
    });
  }

  joinPrices() {
    this.oreArray.forEach(function(data) {
      const matchingPrice = this.getMatchingPrice(data);
    });
  }

  getMatchingPrice(data) {
    for (let i = 0; i < this.pricesArray.length; i++) {
      if (this.pricesArray[i].type_id === data.id) {
            return this.pricesArray[i];
        }
    }
    return false;
  }

  ngOnInit() {
    this.getOres();
  }
}

Not sure what is going on here. I'm transferring this working code from vanilla JS to Angular 2/Typescript and getting this error when trying to run the above:

Cannot read property 'getMatchingPrice' of undefined

The error is occurring on this line:

const matchingPrice = this.getMatchingPrice(data);

Any insight is appreciated. Thank you.

Answer 1

Try this instead:

  joinPrices() {
      this.oreArray.forEach((data) => {
         const matchingPrice = this.getMatchingPrice(data);
      });
   }