TypeError: Cannot read property 'insertData' of undefined

Question

I am getting the error:

StudentsAttendanceCreateComponent.html:9 ERROR TypeError: Cannot read property 'insertData' of undefined at students-attendance-create.component.ts:96 at Array.forEach ()

submitForm(form: NgForm) {
let cursoID: number;

Object.keys(form.value).forEach(function (key) {
  if (key === 'cursoId') {
    cursoID = form.value[key];
  }
});

Object.keys(form.value).forEach(function (key) {
  if (key !== 'cursoId') {
    const json = {
      EstudianteId: key,
      asistencia: form.value[key],
      cursoId: cursoID
    };
    this.insertData(json);
  }
});
}



insertData(json: any) {
this.service.studentsAsistencia(json)
  .subscribe(() => {
    this.openSnackBar('Datos insertados correctamente.', 'OK');
  });
// this.clearForm();
}

Thanks !!!!

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, Oct 22 '18 at 18:29

score 1 · Answer 1 · answered Oct 22 '18 at 18:07

1

Its reference error. If you want to use the component variable or method inside a callback, you should use lambda (arrow) function instead of using literal or anonymous function.

answered Oct 22 '18 at 18:07

alokstar

499
2
7

Aragorn · Accepted Answer · 2018-10-22T18:12:42.690

1

forEach takes a callback function, this is not available inside unless you bind it. One way to do it is through arrow function ()=> does bind it automatically.

Object.keys(form.value).forEach((key) => {
  if (key !== 'cursoId') {
    const json = {
      EstudianteId: key,
      asistencia: form.value[key],
      cursoId: cursoID
    };
    this.insertData(json);
  }
});
}

edited Oct 22 '18 at 18:12

answered Oct 22 '18 at 18:10

Aragorn

5,021
5
26
37

score 1 · Answer 3 · answered Oct 22 '18 at 18:13

In order to use this keyword inside the callback function, you should use an arrow function, your code should look like this:

submitForm(form: NgForm) {

let cursoID: number;

Object.keys(form.value).forEach((key) => {
  if (key === 'cursoId') {
    cursoID = form.value[key];
  }
});

Object.keys(form.value).forEach((key) => {
  if (key !== 'cursoId') {
    const json = {
      EstudianteId: key,
      asistencia: form.value[key],
      cursoId: cursoID
    };
    this.insertData(json);
  }
});
}



insertData(json: any) {
this.service.studentsAsistencia(json)
  .subscribe(() => {
    this.openSnackBar('Datos insertados correctamente.', 'OK');
  });
// this.clearForm();
}

you can read about the differences in here: https://stackoverflow.com/a/34361380/7269215

TypeError: Cannot read property 'insertData' of undefined

3 Answers3