Cannot set property in forEach loop using TypeScript

Question

I'm trying to set a Boolean property which is nested within two forEach loops.

The loops work fine, but I get an error that says: TypeError: Cannot set property 'hasAtLeastOne' of undefined.

Does anyone have any ideas?

Thanks.

export classItemComponent implements OnInit {

hasAtLeastOne: boolean = false;


onSubmit(event) {
    this.hasAtLeastOne = false;
    this.user.Item.forEach(function (value) {

    value.ItemMemberships.forEach(function (value) {

      if (value.ItemMembershipActive == 1)
      {
         this.hasAtLeastOne = true;        // This line fails.
      }
    })

  });
}

}

Possible duplicate of How to access the correct `this` inside a callback? — Matt McCutchen
– Matt McCutchen, Commented Aug 28, 2018 at 18:45

JeRivals · Accepted Answer · 2018-08-28 19:13:59Z

5

Inside your loop function this is not anymore bind to your component.

You have 3 solutions :

Use an alias for this :

hasAtLeastOne: boolean = false;

onSubmit(event) {
  var self = this;
  this.hasAtLeastOne = false;
  this.user.Item.forEach(function (value) {
    value.ItemMemberships.forEach(function (value) {
      if (value.ItemMembershipActive == 1) {
        self.hasAtLeastOne = true;
      }
    })
  });
}

Bind this in loop functions

hasAtLeastOne: boolean = false;

onSubmit(event) {
  this.hasAtLeastOne = false;
  this.user.Item.forEach(function (value) {
    value.ItemMemberships.forEach(function (value) {
      if (value.ItemMembershipActive == 1) {
        this.hasAtLeastOne = true;
      }
    }.bind(this))
  }.bind(this));
}

Use arrow functions (ES6) :

hasAtLeastOne: boolean = false;

onSubmit(event) {
  this.hasAtLeastOne = false;
  this.user.Item.forEach(item => {
    item.ItemMemberships.forEach(itemMember => {
      if (itemMember.ItemMembershipActive == 1) {
        this.hasAtLeastOne = true;
      }
    })
  });
}

answered Aug 28, 2018 at 19:13

JeRivals

2641 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dev1998 Over a year ago

Bingo. You did great. I went with the first technique and it solved my problem. Thanks.

Collectives™ on Stack Overflow

Cannot set property in forEach loop using TypeScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related