getting undefined while accessing this object in angular

Question

I have 2 objects OldAnswer and NewAnswer. I am trying to convert array of OldAnswer objects to array of NewAnswer objects.

export class AnswerComponent implements OnInit {


answers: OldAnswer[] = [/* some data  */];

newanswers: NewAnswer[];

constructor() {


    this.answers.forEach(function (answer) {

        answer.answers.forEach(function (a){

            for (var key in a) {
                text = // some logic"";     
            }
            // exception in below line
        this.newanswers.push({id: answer.observationId,answer: text});
        });
    });

    }

}

but I am getting "Can't call newanswers on undefined". Why is this object undefined here and not while accessing answers?

Derviş Kayımbaşıoğlu · Accepted Answer · 2019-01-15 00:13:20Z

2

you declared array but did not initialize. Fix:

newanswers: NewAnswer[] = [];

Also you need to use arrow function so that your scope will not change

this.answers.forEach(answer => { 
  answer.answers.forEach( (a) => { 
    for (var key in a) { 
      text = // some logic""; 
    } // exception in below line 

    this.newanswers.push({id: answer.observationId,answer: text}); 
}); }); }

edited Jan 15, 2019 at 0:13

answered Jan 15, 2019 at 0:02

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

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

1 Comment

Pac0 Over a year ago

Seems by OP's error message that this is undefined here,

Pac0 · Accepted Answer · 2019-01-15 01:09:37Z

1

Cause of the issue :

you used forEach with function()

Solution :

Use arrow functions to define your functions in the forEachs :

this.answers.forEach((answer) => {

    answer.answers.forEach((a) => {

Why arrow functions solve the problem :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

Until arrow functions, every new function defined its own this value (based on how function was called, a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

(emphasis mine).

Since Angular / TypeScript will generate strict mode Javascript, the this will undefined in the body of a function() {}, it will not reference the object instance of your class anymore.

Note: there are other "good?-old JavaScript ways" to solve this issue, but the arrow function is really the usual way of doing this now and in most situations like this in TypeScript / Angular / ES6.

Also initialize your array before calling `push()` on it

However, you will also experience the problem that newanswers is also undefined (at least it isn't in the sample you provided, so as Simonare noticed, you should also get it initialized as an empty array [].

edited Jan 15, 2019 at 1:09

answered Jan 15, 2019 at 0:06

Pac0

23.3k9 gold badges76 silver badges85 bronze badges

2 Comments

Arron McCrory Over a year ago

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… adding a reference link for the ES6 arrow function syntax and explanation as to why this is necessary

Pac0 Over a year ago

@ArronMcCrory yes thank you, I didn't elaborate when I wrote it. I edited my answer to incorporate the link, and added some explanations in the answer itself

Collectives™ on Stack Overflow

getting undefined while accessing this object in angular

2 Answers 2

1 Comment

Cause of the issue :

Solution :

Why arrow functions solve the problem :

Also initialize your array before calling `push()` on it

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Cause of the issue :

Solution :

Why arrow functions solve the problem :

Also initialize your array before calling push() on it

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Also initialize your array before calling `push()` on it