Angular2 forEach cant read property

Question

How can I call this.firms within a data forEach()?

I know how to do this in Angular1, but not with my current project in Angular 2.

Currently it works fine outside of the forEach, but not within.

 console.log(this.firms[0].name); // works
    var a = 0;
        console.log("--------------");

    data.forEach(function (eachObj) {
      console.log("firms check!");
      console.log(this.firms); // not working
      a = a + eachObj.income; 
      eachObj.name = this.firms[data.firmid - 1].name; // wont work
    });

Error:

Cannot read property 'firms' of undefined

Answer 1

The context this is not injected in the anonymous function called by the forEach(). That's why this is undefined.

You can either use the arrow function if you're using ES6 features, as it keeps the context in the function:

data.forEach(eachObj => {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
});

Or simply bind the context directly:

data.forEach(function (eachObj) {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
}.bind(this));

Edit:

As mentioned by zeroflagL, you could simply pass the context to the forEach():

data.forEach(function (eachObj) {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
}, this);