empty values in forEach after a HTTPrequest

Question

I am working on a project in which I have to get students enrolled courses and courses list.

getting course

this.courses = <Array<Course>>[];
this.coursesService.getCourses().subscribe((response: Array<Course>) => {
this.courses = response;
console.log(this.courses);

});

getting Students enrolled course

this.id = this.router.snapshot.paramMap.get('id');
this.studentService.getStudentsById(this.id).subscribe((response: Student) => {
  this.student = response;
  console.log(this.student);
});

my code for getting avail

this.courses.forEach(function(item, i, object) {
  this.student.enrollments.forEach(function(enrollments, j , objectb) {
      if (item === enrollments) {
        object.splice(i, 1);
      }
  });
});

So when my page load. it didnt splice/remove the item in the courses which he is currently enrolled.I think the forEach function executes before it has values. is this about the subsribe? or im just doing it all wrong

Possible duplicate of [How to return value from function which has Observable subscription inside?](https://stackoverflow.com/questions/38291783/how-to-return-value-from-function-which-has-observable-subscription-inside) — Reactgular, Dec 19 '18 at 03:05

VithuBati · Accepted Answer · 2018-12-19T03:18:06.287

0

Since getCourses() is asynchronous, the program won't wait for the response to run the remaining code. therefore by the time, it runs the callback, it would have run the foreach code. the solution is to call the foreach inside the callback.

this.courses = <Array<Course>>[];
this.coursesService.getCourses().subscribe((response: Array<Course>) => {
this.courses = response;

this.id = this.router.snapshot.paramMap.get('id');
this.studentService.getStudentsById(this.id).subscribe((response: 
Student) => {
  this.student = response;
      this.courses.forEach(function(item, i, object) {
  this.student.enrollments.forEach(function(enrollments, j , objectb) {
      if (item === enrollments) {
        object.splice(i, 1);
      }
  });
});
});
});

edited Dec 19 '18 at 03:18

answered Dec 19 '18 at 03:04

VithuBati

1,918
1
18
26

Ive also tried to do that. And nothing happens. May be how i splice is wrong? – buruguduys Dec 19 '18 at 03:12
I updated the code. but the ideal way to use this is to do a forkJoin. google angular forkJoin and see – VithuBati Dec 19 '18 at 03:18

empty values in forEach after a HTTPrequest

1 Answers1